Last active
September 21, 2022 18:19
-
-
Save cyrusfirheir/e3f6ddf692b50c2fa68cd3d5135fdf83 to your computer and use it in GitHub Desktop.
Canvas drawing input for img2img and inpainting (Stable Diffusion) generation.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <style> | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| color-scheme: dark; | |
| } | |
| body { | |
| background-color: #121212; | |
| font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; | |
| font-size: 16px; | |
| } | |
| #controls { | |
| display: grid; | |
| grid-template-columns: 7em 7em 30em; | |
| grid-template-rows: 7em 30em; | |
| grid-template-areas: | |
| "b-color c-size c-width" | |
| "b-size c-height canvas" | |
| ; | |
| } | |
| .input-container { | |
| position: relative; | |
| display: flex; | |
| flex-flow: column nowrap; | |
| justify-content: center; | |
| align-items: center; | |
| padding-top: 0.25em; | |
| } | |
| [for="canvas-width"] { | |
| flex-flow: row nowrap; | |
| justify-content: flex-start; | |
| width: 100%; | |
| gap: 0.5em; | |
| } | |
| [for="canvas-width"] div:nth-child(1) { | |
| width: 5.5em; | |
| } | |
| [for="canvas-width"] div:nth-child(2) { | |
| width: 100%; | |
| } | |
| #width-input { | |
| width: 100%; | |
| } | |
| [for="brush-size"], | |
| [for="canvas-height"] { | |
| justify-content: flex-start; | |
| } | |
| [type="color"] { | |
| appearance: none; | |
| width: 5em; | |
| height: 5em; | |
| clip-path: circle(40%); | |
| border: none; | |
| padding: 0; | |
| background: none; | |
| } | |
| .brush-color-border { | |
| pointer-events: none; | |
| position: absolute; | |
| translate: -50% -30%; | |
| top: 50%; | |
| left: 50%; | |
| width: 3.5em; | |
| height: 3.5em; | |
| border-radius: 50%; | |
| border: 0.15em solid #eee; | |
| } | |
| [type="range"] { | |
| height: calc(5em - 4px); | |
| margin: 0; | |
| padding: 0; | |
| border: none; | |
| background: none; | |
| } | |
| #size-input, | |
| #height-input { | |
| position: relative; | |
| transform: rotate(90deg); | |
| margin-top: 15em; | |
| width: 33em; | |
| z-index: 100; | |
| } | |
| select { | |
| height: 2em; | |
| font-size: 1em; | |
| margin: 1.1em; | |
| padding: 0 0.5em; | |
| } | |
| [type="checkbox"] { | |
| width: 2.5em; | |
| height: 2.5em; | |
| margin: 1.5em; | |
| } | |
| [for="canvas-draw-area"] { | |
| align-items: flex-start; | |
| justify-content: flex-start; | |
| } | |
| #draw-canvas { | |
| border: 0.15em solid #eee; | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-image: var(--image); | |
| transform-origin: top left; | |
| } | |
| </style> | |
| <div id="controls"> | |
| <label for="brush-color" class="input-container" style="grid-area: b-color"> | |
| <div>Brush Color</div> | |
| <div> | |
| <input name="brush-color" id="color-input" type="color" value="#ff0000" /> | |
| <div class="brush-color-border"></div> | |
| </div> | |
| </label> | |
| <label for="brush-size" class="input-container" style="grid-area: b-size"> | |
| <div>Brush Size</div> | |
| <div> | |
| <input name="brush-size" id="size-input" type="range" min="1" value="5" /> | |
| </div> | |
| </label> | |
| <label for="canvas-size" class="input-container" style="grid-area: c-size"> | |
| <span id="canvas-width-display"></span> | |
| x | |
| <span id="canvas-height-display"></span> | |
| </label> | |
| <label for="canvas-width" class="input-container" style="grid-area: c-width"> | |
| <div>Width</div> | |
| <div> | |
| <input name="canvas-width" id="width-input" type="range" min="6" max="20" value="8" /> | |
| </div> | |
| </label> | |
| <label for="canvas-height" class="input-container" style="grid-area: c-height"> | |
| <div>Height</div> | |
| <div> | |
| <input name="canvas-height" id="height-input" type="range" min="6" max="20" value="8" /> | |
| </div> | |
| </label> | |
| <label for="canvas-draw-area" class="input-container" style="grid-area: canvas"> | |
| <div>Draw</div> | |
| <div> | |
| <canvas id="draw-canvas" style="grid-area: canvas"></canvas> | |
| </div> | |
| </label> | |
| </div> | |
| <script>{{ SKETCHABLE }}</script> | |
| <script> | |
| var data; | |
| var inPaint; | |
| var cached; | |
| const canvas = document.getElementById("draw-canvas"); | |
| const widthInput = document.getElementById("width-input"); | |
| const heightInput = document.getElementById("height-input"); | |
| const widthDisplay = document.getElementById("canvas-width-display"); | |
| const heightDisplay = document.getElementById("canvas-height-display"); | |
| widthInput.addEventListener("input", run); | |
| heightInput.addEventListener("input", run); | |
| let first = true; | |
| var button = document.querySelector('button'); | |
| function run() { | |
| if (first) { | |
| first = false; | |
| cached = data; | |
| data = new Promise(resolve => { | |
| button.onclick = () => { | |
| resolve(canvas.toDataURL("image/png")); | |
| }; | |
| }); | |
| } | |
| const width = parseInt(widthInput.value) * 64; | |
| const height = parseInt(heightInput.value) * 64; | |
| widthDisplay.innerHTML = `${widthInput.value} (${width})`; | |
| heightDisplay.innerHTML = `${heightInput.value} (${height})`; | |
| canvas.width = width; | |
| canvas.height = height; | |
| if (inPaint) { | |
| document.body.style.setProperty("--image", `url('${cached}')`); | |
| } else { | |
| const ctx = canvas.getContext("2d"); | |
| ctx.fillStyle = "white"; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| const img = new Image; | |
| img.onload = () => ctx.drawImage(img, 0, 0); | |
| img.src = cached; | |
| } | |
| const options = { | |
| graphics: { | |
| fillStyle: "black", | |
| strokeStyle: "black" | |
| } | |
| }; | |
| let sketcher = new Sketchable(canvas, options); | |
| canvas.addEventListener("mouseleave", () => { | |
| sketcher = new Sketchable(canvas, options); | |
| }); | |
| const color = document.getElementById("color-input"); | |
| const colorChangeHandler = () => { | |
| const v = color.value; | |
| Object.assign(options.graphics, { | |
| strokeStyle: v, | |
| fillStyle: v | |
| }); | |
| sketcher.config(options); | |
| }; | |
| colorChangeHandler(); | |
| color.addEventListener("change", colorChangeHandler); | |
| const size = document.getElementById("size-input"); | |
| const sizeChangeHandler = () => { | |
| const v = Number(size.value); | |
| Object.assign(options.graphics, { | |
| firstPointSize: v / 2, | |
| lineWidth: v | |
| }); | |
| sketcher.config(options); | |
| }; | |
| sizeChangeHandler(); | |
| size.addEventListener("change", sizeChangeHandler); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! jSketch drawing lib (all in one) | v2.0.1 | 2019-07-23 */ | |
| /* https://github.com/luileito/jsketch */ | |
| !function(a){function b(a,b){if(!a)throw new Error("Sketchable requires a DOM element or selector.");return"string"==typeof a&&(a=document.querySelector(a)),this.setContext(a),this.stageWidth=a.offsetWidth,this.stageHeight=a.offsetHeight,this.data=b,this.callStack=[],this.setDefaults()}b.prototype={setContext:function(a){if(!a)throw new Error("No canvas element specified.");return this.canvas=a,this.context=a.getContext("2d"),this},setDefaults:function(){var a={fillStyle:this.data.fillStyle||"#F00",strokeStyle:this.data.strokeStyle||"#F0F",lineWidth:this.data.lineWidth||2,lineCap:this.data.lineCap||"round",lineJoin:this.data.lineJoin||"round",miterLimit:this.data.miterLimit||10};for(var b in a){var c=a[b];this.callStack.push({property:b,value:c})}return this.saveGraphics(a).restoreGraphics()},size:function(a,b){var c=parseFloat(a),d=parseFloat(b);return this.stageWidth=c,this.stageHeight=d,this.canvas.width=c,this.canvas.height=d,this.restoreGraphics(),this},background:function(a){var b=[0,0,this.stageWidth,this.stageHeight];return this.beginFill(a),this.context.fillRect.apply(this.context,b),this.endFill(),this.callStack.push({property:"fillStyle",value:a}),this.callStack.push({method:"fillRect",args:b}),this},stage:function(a,b,c){return this.size(a,b).background(c),this},beginFill:function(a){return this.saveGraphics({fillStyle:a}),this.context.fillStyle=a,this.callStack.push({property:"fillStyle",value:a}),this},endFill:function(){return this.restoreGraphics(),this},lineStyle:function(a,b,c,d,e){var f={strokeStyle:a,lineWidth:b,lineCap:c,lineJoin:d,miterLimit:e};return this.saveGraphics(f).restoreGraphics()},moveTo:function(a,b){var c=[].slice.call(arguments);return this.context.moveTo.apply(this.context,c),this.callStack.push({method:"moveTo",args:c}),this},lineTo:function(a,b){var c=[].slice.call(arguments);return this.context.lineTo.apply(this.context,c),this.callStack.push({method:"lineTo",args:c}),this},line:function(a,b,c,d){return this.moveTo(a,b),this.lineTo(c,d),this},curveTo:function(a,b,c,d){var e=[c,d,a,b];return this.context.quadraticCurveTo.apply(this.context,e),this.callStack.push({method:"quadraticCurveTo",args:e}),this},curve:function(a,b,c,d,e,f){return this.moveTo(a,b),this.curveTo(c,d,e,f),this},stroke:function(){return this.context.stroke(),this.callStack.push({method:"stroke"}),this},strokeRect:function(a,b,c,d){var e=[].slice.call(arguments);return this.context.beginPath(),this.context.strokeRect.apply(this.context,e),this.context.closePath(),this.callStack.push({method:"strokeRect",args:e}),this},fillRect:function(a,b,c,d){var e=[].slice.call(arguments);return this.context.beginPath(),this.context.fillRect.apply(this.context,e),this.context.closePath(),this.callStack.push({method:"fillRect",args:e}),this},rect:function(a,b,c,d){var e=[].slice.call(arguments);return this.fillRect.apply(this,e),this.strokeRect.apply(this,e),this},strokeCircle:function(a,b,c){var d=[a,b,c,0,2*Math.PI,!1];return this.context.beginPath(),this.context.arc.apply(this.context,d),this.context.stroke(),this.context.closePath(),this.callStack.push({method:"strokeCircle",args:d}),this},fillCircle:function(a,b,c){var d=[a,b,c,0,2*Math.PI,!1];return this.context.beginPath(),this.context.arc.apply(this.context,d),this.context.fill(),this.context.closePath(),this.callStack.push({method:"fillCircle",args:d}),this},circle:function(a,b,c){var d=[].slice.call(arguments);return this.fillCircle.apply(this,d),this.strokeCircle.apply(this,d),this},radialCircle:function(a,b,c,d,e){("undefined"==typeof d||0>d)&&(d=1);var f=this.context.createRadialGradient(a,b,c,a,b,d);e&&"array"===e.constructor.name.toLowerCase()||(e=[this.context.fillStyle,"white"]);for(var g=0;g<e.length;g++){var h=e[g];f.addColorStop(g,h)}return this.beginFill(f).fillCircle(a,b,c).endFill(),this},beginPath:function(){return this.context.beginPath(),this.callStack.push({method:"beginPath"}),this},closePath:function(){return this.context.closePath(),this.callStack.push({method:"closePath"}),this},eraser:function(){return this.context.globalCompositeOperation="destination-out",this.callStack.push({property:"comp-op",value:"dst_out"}),this},pencil:function(){return this.context.globalCompositeOperation="source-over",this.callStack.push({property:"comp-op",value:"src_over"}),this},clear:function(){var a=[0,0,this.stageWidth,this.stageHeight];return this.context.clearRect.apply(this.context,a),this.callStack.push({method:"clear"}),this},save:function(){return this.context.save(),this.callStack.push({method:"save"}),this},restore:function(){return this.context.restore(),this.callStack.push({method:"restore"}),this},saveGraphics:function(a){for(var b in a){var c=a[b];c&&c!==this.data[b]&&(this.data[b]=c,this.callStack.push({property:b,value:c}))}return this},restoreGraphics:function(){for(var a in this.data)this.context[a]=this.data[a];return this},drawImage:function(a,b,c){"undefined"==typeof b&&(b=0),"undefined"==typeof c&&(c=0);var d=this,e=new Image;return e.src=a,e.onload=function(){d.context.drawImage(e,b,c),d.callStack.push({method:"drawImage",args:[e,b,c]}),d.callStack.push({method:"removeAsync"})},e.onerror=function(){d.callStack.push({method:"removeAsync"})},d.callStack.push({method:"addAsync"}),this}},a.jSketch=b}(this),function(){function a(a){var d=a[c],e=b.length;return d||(d=a[c]=e,b[d]={}),b[d]}var b=[0],c="data"+Date.now();window.dataBind=a}(),window.Event={add:function(a,b,c){return a?("string"==typeof a&&(a=document.querySelector(a)),void(a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent?a.attachEvent("on"+b,c):a[b+c]=function(){c(window.event)})):!1},remove:function(a,b,c){return a?("string"==typeof a&&(a=document.querySelector(a)),void(a.removeEventListener?a.removeEventListener(b,c,!1):a.detachEvent?a.detachEvent("on"+b,c):a[b+c]=null)):!1},isRightClick:function(a){return a||(a=window.event),a.which?3===a.which:a.button?2===e.button:!1}},window.deepExtend=function(a){a=a||{};for(var b=1;b<arguments.length;b++){var c=arguments[b];for(var d in c)c.hasOwnProperty(d)&&("object"==typeof c[d]?a[d]=deepExtend(a[d],c[d]):a[d]=c[d])}return a},function(a){function b(a,b){if(!a)throw new Error("Sketchable requires a DOM element.");return"string"==typeof a&&(a=s.querySelector(a)),this.elem=a,this.init(b)}function c(b){var c=b.getBoundingClientRect(),d=s.body,e=s.documentElement,f=a.pageYOffset||e.scrollTop||d.scrollTop,g=a.pageXOffset||e.scrollLeft||d.scrollLeft,h=e.clientTop||d.clientTop||0,i=e.clientLeft||d.clientLeft||0,j=c.top+f-h,k=c.left+g-i;return{top:Math.round(j),left:Math.round(k)}}function d(a,b){b||(b=dataBind(a)[r].options),b.cssCursors&&(a.style.cursor=b.interactive?"pointer":"not-allowed"),a.onselectstart=function(){return!1}}function e(a){var b=a.target,d=c(b);return{x:Math.round(a.pageX-d.left),y:Math.round(a.pageY-d.top),time:Date.now()}}function f(a,b,c){var d=b.coords[a];if(b.options.relTimestamps&&(0===b.strokes.length&&0===d.length&&(b.timestamp=c.time),c.time-=b.timestamp),d.push([c.x,c.y,c.time,+b.sketch.isDrawing,a]),b.options.filterCoords&&d.length>1){var e=d.length-1,f=d[e],g=d[e-1];f[0]==g[0]&&f[1]==g[1]&&d.splice(e,1)}}function g(a){return a.touches?!1:void m(a)}function h(a){return a.touches?!1:void n(a)}function i(a){return a.touches?!1:void o(a)}function j(a){p(a,m),a.preventDefault()}function k(a){p(a,n),a.preventDefault()}function l(a){p(a,o),a.preventDefault()}function m(a){if(Event.isRightClick(a))return!1;var b=Math.abs(a.identifier||0),c=a.target,d=dataBind(c)[r],g=d.options;if(g.interactive){var h=e(a);"function"==typeof g.events.mousedownBefore&&g.events.mousedownBefore(c,d,a),g.graphics.firstPointSize>0&&d.sketch.beginFill(g.graphics.fillStyle).fillCircle(h.x,h.y,g.graphics.firstPointSize).endFill(),d.sketch.isDrawing=!0,d.sketch.beginPath();var i=d.coords[b];i||(i=[]),i.length>0&&d.strokes.push(i),d.coords[b]=[],f(b,d,h),"function"==typeof g.events.mousedown&&g.events.mousedown(c,d,a)}}function n(a){var b=Math.abs(a.identifier||0),c=a.target,d=dataBind(c)[r],g=d.options;if(g.interactive&&(g.mouseupMovements&&0!==d.strokes.length||d.sketch.isDrawing)){var h=e(a);"function"==typeof g.events.mousemoveBefore&&g.events.mousemoveBefore(c,d,a);var i=d.coords[b],j=i[i.length-1];if(j){var k=d.sketch;d.sketch.isDrawing?k.lineStyle(g.graphics.strokeStyle,g.graphics.lineWidth):g.mouseupMovements&&k.lineStyle(g.mouseupMovements.strokeStyle||"#DDD",g.mouseupMovements.lineWidth||1),k.line(j[0],j[1],h.x,h.y).stroke()}f(b,d,h),"function"==typeof g.events.mousemove&&g.events.mousemove(c,d,a)}}function o(a){var b=Math.abs(a.identifier||0),c=a.target,d=dataBind(c)[r],e=d.options;e.interactive&&("function"==typeof e.events.mouseupBefore&&e.events.mouseupBefore(c,d,a),d.sketch.isDrawing=!1,d.sketch.closePath(),d.strokes.push(d.coords[b]),d.coords[b]=[],"function"==typeof e.events.mouseup&&e.events.mouseup(c,d,a))}function p(a,b){var c=a.target,d=dataBind(c)[r],e=d.options;if(e.multitouch)for(var f=a.changedTouches,g=0;g<f.length;g++){var h=f[g];b(h)}else{var h=a.touches[0];b(h)}a.preventDefault()}function q(a){var b=dataBind(a)[r],c=b.options,d=b.sketch;d.clear();for(var e=0;e<b.strokes.length;e++)for(var f=b.strokes[e],g=0;g<f.length;g++){var h=f[g],i=f[g+1],j=!0;if(h.length>3&&(j=1===h[3]),!j&&!c.mouseupMovements)break;if(0===g){c.graphics.firstPointSize>0&&d.beginFill(c.graphics.fillStyle).fillCircle(h[0],h[1],c.graphics.firstPointSize).endFill();var k,l;j?(k=c.strokeStyle,l=c.lineWidth):c.mouseupMovements&&(k=c.mouseupMovements.strokeStyle||"#DDD",l=c.mouseupMovements.lineWidth||1),d.lineStyle(k,l)}else i&&d.beginPath().line(h[0],h[1],i[0],i[1]).stroke().closePath()}}var r="sketchable",s=a.document;b.prototype={init:function(a){var c=deepExtend({},b.prototype.defaults,a||{}),e=this.elem,f=dataBind(e)[r];f||(Event.add(e,"mousedown",g),Event.add(e,"mousemove",h),Event.add(e,"mouseup",i),Event.add(e,"touchstart",j),Event.add(e,"touchmove",k),Event.add(e,"touchend",l),d(e,c));var m=new jSketch(e,c.graphics);dataBind(e)[r]=f={strokes:[],coords:{},timestamp:0,sketch:m,instance:this,options:c},"function"==typeof c.events.init&&c.events.init(e,f);for(var n in this.plugins)this.plugins[n](this);return this},config:function(a){var c=this.elem,e=dataBind(c)[r];return a?(e.options=deepExtend({},b.prototype.defaults,e.options,a),d(c),this):e.options},data:function(a){var b=this.elem,c=dataBind(b)[r];return a?c[a]:c},strokes:function(a){var b=this.elem,c=dataBind(b)[r];return a?(c.strokes=a,q(b),this):c.strokes},handler:function(a){var b=this.elem,c=dataBind(b)[r];return a(b,c),this},clear:function(a){var b=this.elem,c=dataBind(b)[r],d=c.options;return c.sketch.clear(),a||(c.strokes=[],c.coords={}),"function"==typeof d.events.clear&&d.events.clear(b,c),this},reset:function(a){var b=this.elem,c=dataBind(b)[r],d=c.options;return this.destroy().init(a),"function"==typeof d.events.reset&&d.events.reset(b,c),this},destroy:function(){var a=this.elem,b=dataBind(a)[r],c=b.options;return Event.remove(a,"mouseup",i),Event.remove(a,"mousemove",h),Event.remove(a,"mousedown",g),Event.remove(a,"touchstart",j),Event.remove(a,"touchmove",k),Event.remove(a,"touchend",l),dataBind(a)[r]=null,"function"==typeof c.events.destroy&&c.events.destroy(a,b),this},decorate:function(a,b,c){var d=this.elem,e=dataBind(d)[r],f=e.options,g="_bound$"+a+"."+c;if(!e[g]){if(e[g]=!0,f.events&&"function"==typeof f.events[a]){var h=f.events[a];f.events[a]=function(){h.apply(this,arguments),b.apply(this,arguments)}}else f.events[a]=b;return this}}},b.prototype.plugins={},b.prototype.defaults={interactive:!0,mouseupMovements:!1,relTimestamps:!1,multitouch:!0,cssCursors:!0,filterCoords:!1,events:{},graphics:{firstPointSize:3,lineWidth:3,strokeStyle:"#F0F",fillStyle:"#F0F",lineCap:"round",lineJoin:"round",miterLimit:10}},a.Sketchable=b}(this),function(a){function b(a){function b(b,c){a.handler(function(a,d){d.sketch.clear(),d.sketch.context.drawImage(b,0,0),d.strokes=c.strokes.slice(),d.sketch.callStack=c.callStack.slice()})}function c(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?f.redo():f.undo();break;case 25:f.redo()}}var d=[],e=-1,f=this;this.undo=function(){return e>0&&(e--,this.restore()),this},this.redo=function(){return e<d.length-1&&(e++,this.restore()),this},this.reset=function(){return d=[],e=-1,this.save()},this.save=function(b){return a.handler(function(a,c){b&&b.identifier>0?d[e].strokes=c.strokes.slice():(d.push({image:a.toDataURL(),strokes:c.strokes.slice(),callStack:c.sketch.callStack.slice()}),e++)}),this},this.state=function(){return JSON.parse(JSON.stringify(d[e]))},this.restore=function(a){a||(a=d[e]);var c=new Image;return c.src=a.image,c.onload=function(){b(this,a)},this},this.init=function(){return Event.remove(document,"keypress",c),Event.add(document,"keypress",c),this.save()},this.destroy=function(){return Event.remove(document,"keypress",c),this.reset()}}var c="sketchable";Sketchable.prototype.plugins.memento=function(a){for(var d={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},e="mouseup clear destroy".split(" "),f=0;f<e.length;f++){var g=e[f];a.decorate(g,d[g],"memento")}deepExtend(a,{memento:{undo:function(){var b=dataBind(a.elem)[c];return b.memento.undo(),a},redo:function(){var b=dataBind(a.elem)[c];return b.memento.redo(),a},save:function(){var b=dataBind(a.elem)[c];return b.memento.save(),a},state:function(){var b=dataBind(a.elem)[c];return b.memento.state()},restore:function(b){var d=dataBind(a.elem)[c];return d.memento.restore(b),a}}});var h=dataBind(a.elem)[c];h.memento=new b(a),h.memento.init()}}(this),function(a){function b(a){function b(b,c,d){var f=c[d],g=c[d+1];if(0===d||f.strokeId!==g.strokeId){if(b.data.firstPointSize){var i=d>0?g:f;b.beginFill(b.data.strokeStyle).fillCircle(i.x,i.y,b.data.firstPointSize).endFill()}d>0&&"function"==typeof h.animationstep&&h.animationstep(a,e),b.closePath().beginPath()}f.strokeId===g.strokeId&&b.line(f.x,f.y,g.x,g.y).stroke()}function d(a){return a instanceof Array?{x:a[0],y:a[1],time:a[2],strokeId:a[4]}:a}for(var e=dataBind(a.elem)[c],f=e.sketch,g=e.strokes,h=e.options.events,i=e.options.graphics,j=[],k=0;k<g.length;k++)for(var l=g[k],m=0;m<l.length;m++){var n=d(l[m]);n.strokeId||(n.strokeId=k),j.push(n)}"function"==typeof h.animationstart&&h.animationstart(a,e);var o,p=0;f.lineStyle(i.strokeStyle,i.lineWidth),function q(){o=requestAnimationFrame(q);try{b(f,j,p,i)}catch(c){console.error(c),cancelAnimationFrame(o)}++p===j.length-1&&(cancelAnimationFrame(o),"function"==typeof h.animationend&&h.animationend(a,e))}(),this.cancel=function(){return cancelAnimationFrame(o),this}}var c="sketchable";Sketchable.prototype.plugins.animate=function(a){for(var d={clear:function(a,b){b.animate&&b.animate.cancel()},destroy:function(a,b){b.animate&&b.animate.cancel()}},e="clear destroy".split(" "),f=0;f<e.length;f++){var g=e[f];a.decorate(g,d[g],"animate")}deepExtend(a,{animate:{strokes:function(){var d=dataBind(a.elem)[c];return d.animate=new b(a),a}}})}}(this),function(a){var b="sketchable";Sketchable.prototype.plugins.serializer=function(a){deepExtend(a,{serializer:{save:function(){var c=dataBind(a.elem)[b];return JSON.stringify({options:c.options,strokes:c.strokes,actions:c.sketch.callStack})},load:function(c){for(var d=dataBind(a.elem)[b],e=JSON.parse(c),f=d.sketch,g=0;g<e.actions.length;g++){var h=e.actions[g];h.property&&"object"!=typeof h.value?f.data[h.property]=h.value:h.method?f[h.method].apply(f,h.args):console.warn("Unknown call:",h)}return d.sketch.callStack=e.actions.slice(),d.strokes=e.strokes.slice(),d.options=e.options,a}}})}}(this),function(a){var b="sketchable";Sketchable.prototype.plugins.svg=function(a){for(var c={clear:function(a,b){b.sketch.callStack=[]},destroy:function(a,b){b.sketch.callStack=[]}},d="clear destroy".split(" "),e=0;e<d.length;e++){var f=d[e];a.decorate(f,c[f],"svg")}deepExtend(a,{svg:{create:function(c){var d=dataBind(a.elem)[b];return d.sketch.toSVG(c),a}}})}}(this); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment