scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Demo Modules 003</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" media="all" href="../../docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <ul id="jump_to"> <li> <a class="large" href="javascript:void(0);">Jump To …</a> <a class="small" href="javascript:void(0);">+</a> <div id="jump_wrapper"> <div id="jump_page_wrapper"> <div id="jump_page"> <a class="source" href="canvas-minimap.html"> ./demo/modules/canvas-minimap.js </a> <a class="source" href="canvas-scene-editor.html"> ./demo/modules/canvas-scene-editor.js </a> <a class="source" href="dom-entity-editor.html"> ./demo/modules/dom-entity-editor.js </a> <a class="source" href="entity-copy-paste.html"> ./demo/modules/entity-copy-paste.js </a> <a class="source" href="entity-manipulation-gui.html"> ./demo/modules/entity-manipulation-gui.js </a> <a class="source" href="entity-navigation.html"> ./demo/modules/entity-navigation.js </a> <a class="source" href="entity-ring-builder.html"> ./demo/modules/entity-ring-builder.js </a> <a class="source" href="london-crime-graphic.html"> ./demo/modules/london-crime-graphic.js </a> <a class="source" href="london-crime-lines.html"> ./demo/modules/london-crime-lines.js </a> <a class="source" href="london-crime-stacked-bars.html"> ./demo/modules/london-crime-stacked-bars.js </a> <a class="source" href="lottie-loader.html"> ./demo/modules/lottie-loader.js </a> <a class="source" href="simple-chart-frame-tests.html"> ./demo/modules/simple-chart-frame-tests.js </a> <a class="source" href="simple-chart-frame.html"> ./demo/modules/simple-chart-frame.js </a> <a class="source" href="simple-graph-lines.html"> ./demo/modules/simple-graph-lines.js </a> <a class="source" href="simple-graph-stacked-bars.html"> ./demo/modules/simple-graph-stacked-bars.js </a> <a class="source" href="wikipedia-views-spiral-chart.html"> ./demo/modules/wikipedia-views-spiral-chart.js </a> <a class="source" href="../snippets/animated-highlight-gradient-text-snippet.html"> ./demo/snippets/animated-highlight-gradient-text-snippet.js </a> <a class="source" href="../snippets/animated-hover-gradient-snippet.html"> ./demo/snippets/animated-hover-gradient-snippet.js </a> <a class="source" href="../snippets/animated-word-gradient-snippet.html"> ./demo/snippets/animated-word-gradient-snippet.js </a> <a class="source" href="../snippets/before-after-slider-infographic.html"> ./demo/snippets/before-after-slider-infographic.js </a> <a class="source" href="../snippets/bubbles-text-snippet.html"> ./demo/snippets/bubbles-text-snippet.js </a> <a class="source" href="../snippets/green-box-snippet.html"> ./demo/snippets/green-box-snippet.js </a> <a class="source" href="../snippets/jazzy-button-snippet.html"> ./demo/snippets/jazzy-button-snippet.js </a> <a class="source" href="../snippets/page-performance-snippet-test.html"> ./demo/snippets/page-performance-snippet-test.js </a> <a class="source" href="../snippets/page-performance-snippet.html"> ./demo/snippets/page-performance-snippet.js </a> <a class="source" href="../snippets/pan-image-snippet.html"> ./demo/snippets/pan-image-snippet.js </a> <a class="source" href="../snippets/placeholder-effect-snippet.html"> ./demo/snippets/placeholder-effect-snippet.js </a> <a class="source" href="../snippets/ripple-effect-snippet.html"> ./demo/snippets/ripple-effect-snippet.js </a> <a class="source" href="../snippets/risograph-text-gradient-snippet.html"> ./demo/snippets/risograph-text-gradient-snippet.js </a> <a class="source" href="../snippets/spotlight-text-snippet-test.html"> ./demo/snippets/spotlight-text-snippet-test.js </a> <a class="source" href="../snippets/spotlight-text-snippet.html"> ./demo/snippets/spotlight-text-snippet.js </a> <a class="source" href="../snippets/swirling-stripes-text-snippet.html"> ./demo/snippets/swirling-stripes-text-snippet.js </a> <a class="source" href="../snippets/text-snippet-helper.html"> ./demo/snippets/text-snippet-helper.js </a> <a class="source" href="../snippets/word-highlighter-snippet.html"> ./demo/snippets/word-highlighter-snippet.js </a> <a class="source" href="../snippets/worley-text-gradient-snippet.html"> ./demo/snippets/worley-text-gradient-snippet.js </a> </div> </div> </li> </ul> <ul class="sections"> <li id="section-1"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-1">§</a> </div> <h1 id="demo-modules-003">Demo Modules 003</h1> Factory functions to create more complex, compound entitys Related files: <ul> <li><a href="../modules-003.html">Compound entitys - main module</a></li> </ul> Import the Scrawl-canvas object <ul> <li>There’s various ways to do this. See <a href="../dom-001.html">Demo DOM-001</a> for more details</li> </ul> </div> <div class="content"><div class='highlight'><pre>import * as scrawl from '../../source/scrawl.js';</pre></div></div> </li> <li id="section-2"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-2">§</a> </div> <h4 id="the-entity-ring-factory">The entity ring factory</h4> This factory takes a single items Javascript Object argument (to match the functionality of built-in Scrawl-canvas factories). Three of the attributes of this argument object are required, the others will fall back on default values. These attrributes are: <ul> <li>canvas (required) - Scrawl-canvas Canvas wrapper object - the canvas which will be hosting the compound entity we are about to create</li> <li>name (required) - String - unique name value</li> <li>entity (required) - Scrawl-canvas entity object - any valid entity that has already been created</li> <li>dimensions - Number - the square dimensions of the compound entity; default: 400</li> <li>buildStartAngle - Number - the angle of the first entity we lay down; default: -45</li> <li>buildEndAngle - Number - the angle of the last entity we lay down - note that this needs to be sufficient to cover at least half of the ring, which we can then copy and stamp to create the final output; default: 225</li> <li>buildStepAngle - Number - the repeat value - higher values lead to fewer entitys making up the final ring; default: 15</li> <li>buildOffset - Number - the entity’s offset from the center of the ring (as measured in px); default: 0</li> <li>reflectOnly - Boolean - when the ring half is copied and pasted back into the final output, it can be set to reflect only, which will give us a bilateral rather than a radial symmetry; default: false</li> </ul> </div> <div class="content"><div class='highlight'><pre>export default function (items = {}) { if (!items.canvas || !items.entity || !items.name) return {}; let canvas = items.canvas, name = items.name, entity = items.entity, dimensions = items.dimensions || 400, buildStartAngle = items.buildStartAngle || -45, buildEndAngle = items.buildEndAngle || 225, buildStepAngle = items.buildStepAngle || 15, buildOffset = items.buildOffset || 0, reflectOnly = items.reflectOnly || false; const cell = canvas.buildCell({ name: `${name}-cell`, dimensions: [dimensions, dimensions], shown: false, compileOrder: 0, }); const clip = scrawl.makeGroup({ name: `${name}-clip-group`, host: `${name}-cell`, order: 0, }); const reflect = scrawl.makeGroup({ name: `${name}-reflect-group`, host: `${name}-cell`, order: 1, }); scrawl.makeBlock({ name: `${name}-clipper`, group: `${name}-clip-group`, start: ['left', 'center'], dimensions: ['100%', '50%'], method: 'clip' }); let v = scrawl.requestVector(0, buildOffset); v.rotate(buildStartAngle); for (let i = buildStartAngle; i <= buildEndAngle; i += buildStepAngle) { entity.clone({ name: `${name}-ringitem-${i}`, group: `${name}-clip-group`, roll: i, offset: [v.x, v.y], }); v.rotate(buildStepAngle); } scrawl.releaseVector(v); scrawl.makePicture({ name: `${name}-reflection`, group: `${name}-reflect-group`, asset: `${name}-cell`, start: ['center', '25%'], handle: ['center', 'center'], flipUpend: true, flipReverse: !reflectOnly, dimensions: ['100%', '50%'], copyDimensions: ['100%', '50%'], copyStartY: '50%', method: 'fill', }); entity.set({ visibility: false, }); return { cell, kill: () => { clip.kill(true); reflect.kill(true); cell.kill(); }, } };</pre></div></div> </li> </ul> </div> </body> </html>