JAVASCRIPT   16

liquid-canvas-plugins.js

Guest on 5th August 2021 05:05:51 PM

  1. (function($) {
  2.  
  3.   $.registerLiquidCanvasPlugin({
  4.     name: "rect",
  5.     paint: function(area) {
  6.       area.ctx.beginPath();
  7.       area.ctx.rect(0, 0, area.width, area.height);
  8.       area.ctx.closePath();
  9.       if (this.action) this.action.paint(area);  // for chaining
  10.     }
  11.   });
  12.  
  13.   $.registerLiquidCanvasPlugin({
  14.     name: "roundedRect",
  15.     defaultOpts: { radius:20 },
  16.     paint: function(area) {
  17.       var ctx = area.ctx;
  18.       var opts = this.opts;
  19.       ctx.beginPath();
  20.       ctx.moveTo(0, opts.radius);
  21.       ctx.lineTo(0, area.height - opts.radius);
  22.       ctx.quadraticCurveTo(0, area.height, opts.radius, area.height);
  23.       ctx.lineTo(area.width - opts.radius, area.height);
  24.       ctx.quadraticCurveTo(area.width, area.height, area.width, area.height - opts.radius);
  25.       ctx.lineTo(area.width, opts.radius);
  26.       ctx.quadraticCurveTo(area.width, 0, area.width - opts.radius, 0);
  27.       ctx.lineTo(opts.radius, 0);
  28.       ctx.quadraticCurveTo(0, 0, 0, opts.radius);
  29.       ctx.closePath();
  30.       if (this.action) this.action.paint(area);  // for chaining
  31.     },
  32.     shrink: function(area, steps) {
  33.       this.defaultShrink(area, steps);
  34.       this.opts.radius -= steps;
  35.     }
  36.   });
  37.  
  38.   // This is a Liquid Canvas Plugin
  39.   $.registerLiquidCanvasPlugin({
  40.     name: "fill",
  41.     defaultOpts: { color:"#aaa" },
  42.     paint: function(area) {
  43.       area.ctx.fillStyle = this.opts.color;
  44.       this.action.paint(area);
  45.       area.ctx.fill();
  46.     }
  47.   });
  48.  
  49.   $.registerLiquidCanvasPlugin({  // hmmmmmmm, no rotation? no width??? ah patterns!
  50.     name: "image",
  51.     defaultOpts: { url:"http://www.ruzee.com/files/liquid-canvas-image.png" },
  52.     paint: function(area) {
  53.       var image = new Image();
  54.       image.src = this.opts.url;
  55.       image.onload = function() {
  56.         area.ctx.drawImage(this, 0, 0);
  57.       };
  58.     }
  59.   });
  60.  
  61.   // This is a Liquid Canvas Plugin
  62.   $.registerLiquidCanvasPlugin({
  63.     name: "gradient",
  64.     defaultOpts: { from: "#fff", to:"#666" },
  65.     paint: function(area) {
  66.       var grad = area.ctx.createLinearGradient(0, 0, 0, area.height);
  67.       grad.addColorStop(0, this.opts.from);
  68.       grad.addColorStop(1, this.opts.to);
  69.       area.ctx.fillStyle = grad;
  70.       this.action.paint(area);
  71.       area.ctx.fill();
  72.     }
  73.   });
  74.   // End of Liquid Canvas Plugin
  75.  
  76.   $.registerLiquidCanvasPlugin({
  77.     name: "shadow",
  78.     defaultOpts: { width:3, color:'#000', shift:2 },
  79.     paint: function(area) {
  80.       var sw = this.opts.width;
  81.      
  82.       area.ctx.fillStyle = this.opts.color;
  83.       area.ctx.globalAlpha = 1.0 / sw;
  84.       for (var s = 0; s < sw; ++s) {
  85.         this.action.paint(area);
  86.         area.ctx.fill();
  87.         this.action.shrink(area, 1);
  88.       }
  89.       area.ctx.globalAlpha = 1;
  90.       area.ctx.translate(0, -this.opts.shift);
  91.     }
  92.   });
  93.  
  94.   $.registerLiquidCanvasPlugin({
  95.     name: "border",
  96.     defaultOpts: { color:'#8f4', width:3 },
  97.     paint: function(area) {
  98.       var bw = this.opts.width;
  99.       area.ctx.strokeStyle = this.opts.color;
  100.       area.ctx.lineWidth = bw;
  101.       this.action.shrink(area, bw / 2);
  102.       this.action.paint(area);
  103.       area.ctx.stroke();
  104.       this.action.shrink(area, bw / 2);
  105.     }
  106.   });
  107.  
  108. })(jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.