scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
162 lines (128 loc) • 7.41 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Canvas 008</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
.controls {
grid-template-columns: 1fr 2fr 2fr 1fr 2fr 2fr;
}
img {
display: none;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - Canvas test 008</h1>
<h2>Picture entity position; manipulate copy attributes</h2>
<canvas
id="mycanvas"
width="600"
height="400"
data-scrawl-canvas
></canvas>
<p id="reportmessage"></p>
<div class="controls">
<div class="pink label">Copy Starts ('n%')</div>
<div class="pink">X: <input class="controlItem" id="copy_start_xPercent" type="range" value="25" min="-5" max="105" step="1" /></div>
<div class="pink">Y: <input class="controlItem" id="copy_start_yPercent" type="range" value="25" min="-5" max="105" step="1" /></div>
<div class="lavender label">Copy Width</div>
<div class="lavender">'n%' <input class="controlItem" id="copy_dims_widthPercent" type="range" value="50" min="0" max="105" step="1" /></div>
<div class="lavender">n <input class="controlItem" id="copy_dims_widthAbsolute" type="range" value="200" min="0" max="405" step="1" /></div>
<div class="pink label">Copy Starts (n)</div>
<div class="pink">X: <input class="controlItem" id="copy_start_xAbsolute" type="range" value="100" min="-5" max="405" step="1" /></div>
<div class="pink">Y: <input class="controlItem" id="copy_start_yAbsolute" type="range" value="100" min="-5" max="405" step="1" /></div>
<div class="lavender label">Copy Height</div>
<div class="lavender">'n%' <input class="controlItem" id="copy_dims_heightPercent" type="range" value="50" min="0" max="105" step="1" /></div>
<div class="lavender">n <input class="controlItem" id="copy_dims_heightAbsolute" type="range" value="200" min="0" max="405" step="1" /></div>
<div class="yellow label">Paste Width</div>
<div class="yellow">'n%' <input class="controlItem" id="paste_dims_widthPercent" type="range" value="33" min="0" max="120" step="1" /></div>
<div class="yellow">n <input class="controlItem" id="paste_dims_widthAbsolute" type="range" value="200" min="0" max="500" step="1" /></div>
<div class="yellow label">Paste Height</div>
<div class="yellow">'n%' <input class="controlItem" id="paste_dims_heightPercent" type="range" value="50" min="0" max="120" step="1" /></div>
<div class="yellow">n <input class="controlItem" id="paste_dims_heightAbsolute" type="range" value="200" min="0" max="500" step="1" /></div>
<div class="blue label">Paste Starts ('n%')</div>
<div class="blue">X: <input class="controlItem" id="paste_start_xPercent" type="range" value="50" min="-50" max="150" step="1" /></div>
<div class="blue">Y: <input class="controlItem" id="paste_start_yPercent" type="range" value="50" min="-50" max="150" step="1" /></div>
<div class="green label">Paste Handles ('n%')</div>
<div class="green">X: <input class="controlItem" id="paste_handle_xPercent" type="range" value="50" min="-50" max="150" step="1" /></div>
<div class="green">Y: <input class="controlItem" id="paste_handle_yPercent" type="range" value="50" min="-50" max="150" step="1" /></div>
<div class="blue label">Paste Starts (n)</div>
<div class="blue">X: <input class="controlItem" id="paste_start_xAbsolute" type="range" value="300" min="-20" max="620" step="5" /></div>
<div class="blue">Y: <input class="controlItem" id="paste_start_yAbsolute" type="range" value="200" min="-20" max="620" step="5" /></div>
<div class="green label">Paste Handles (n)</div>
<div class="green">X: <input class="controlItem" id="paste_handle_xAbsolute" type="range" value="100" min="-100" max="300" step="1" /></div>
<div class="green">Y: <input class="controlItem" id="paste_handle_yAbsolute" type="range" value="100" min="-100" max="300" step="1" /></div>
<div class="blue label">Paste Starts ('str')</div>
<div class="blue">X: <select class="controlItem" id="paste_start_xString">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
</div>
<div class="blue">Y: <select class="controlItem" id="paste_start_yString">
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div class="green label">Paste Handles ('str')</div>
<div class="green">X: <select class="controlItem" id="paste_handle_xString">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
</div>
<div class="green">Y: <select class="controlItem" id="paste_handle_yString">
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div class="yellow label">Roll</div>
<div class="yellow"><input class="controlItem" id="roll" type="range" value="0" min="0" max="360" step="1" /></div>
<div class="yellow"> </div>
<div class="yellow label">Scale</div>
<div class="yellow"><input class="controlItem" id="scale" type="range" value="1" min="0" max="2" step="0.01" /></div>
<div class="yellow"> </div>
<div class="yellow label">Flip-upend</div>
<div class="yellow">
<select class="controlItem" id="upend">
<option value="0">false</option>
<option value="1">true</option>
</select>
</div>
<div class="yellow"> </div>
<div class="yellow label">Flip-reverse</div>
<div class="yellow">
<select class="controlItem" id="reverse">
<option value="0">false</option>
<option value="1">true</option>
</select>
</div>
<div class="yellow"> </div>
</div>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Import an image loaded via the DOM (on page load) into Scrawl-canvas</li>
<li>Create a Picture entity using the imported image</li>
<li>Display the Picture entity on a canvas</li>
<li>Check that the entity location and dimensions attributes (start, handle, width, height) work as expected</li>
<li>Check that the entity manipulation attributes (roll, scale, flip) work as expected</li>
<li>Check that altering the entity's copy attributes (copyStart, copyWidth, copyHeight) perform as expected, and that the code correctly compensates when the user attempts to copy from outside the image assets natural dimensions - in particular, the image should not stretch when the copy attributes abut or cross the image asset's dimension boundaries</li>
</ul>
<ul>
<li>Import an image dynamically by defining and displaying a Picture entity with an imageSource attribute</li>
</ul>
<p><b>Touch test:</b> not required</p>
<p><a href="../docs/demo/canvas-008.html">Annotated code</a></p>
</div>
<img id="iris" src="img/iris.png" class="flowers" />
<script src="canvas-008.js" type="module"></script>
</body>
</html>