scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
142 lines (114 loc) • 5.37 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 030</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
.controls {
grid-template-columns: 1fr 3fr 1fr 3fr;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - Canvas test 030</h1>
<h2>Polyline entity functionality</h2>
<h3>Note that the Polyline entity is experimental!<br />Breaking changes may occur at short notice while the code continues to be developed</h3>
<p>The interplay between using absolute/relative coordinates and artefacts as pins, mapping to pins, pivoting the entire line to an artefact, and other artefacts using line pins as their pivot values (plus handles, offsets, dragging, etc) ... can be a bit confusing. This demo represents (current) expected behaviour.</p>
<p>The Polyline is draggable in this demo, as are the green and red pins:</p>
<canvas
id="mycanvas"
width="600"
height="500"
data-scrawl-canvas
data-base-background-color="aliceblue"
></canvas>
<p id="reportmessage"></p>
<div class="controls">
<div class="blue label">Tension</div>
<div class="blue">-0.5 - 1.5 <input class="controlItem" id="tension" type="range" value="0" min="-0.5" max="1.5" step="0.1" /></div>
<div class="green label">Coordinates</div>
<div class="green">
<select class="specialItem" id="pins">
<option value="absolute">Absolute values</option>
<option value="relative">Relative values</option>
<option value="artefacts">Green pins</option>
</select>
</div>
<div class="blue label">Closed</div>
<div class="blue">
<select class="controlItem" id="closed">
<option value="0">False</option>
<option value="1">True</option>
</select>
</div>
<div class="green label">Pivot to</div>
<div class="green">
<select class="controlItem" id="pivot">
<option value="start">Start</option>
<option value="pivot">Red pin</option>
<option value="mouse">Mouse</option>
</select>
</div>
<div class="blue label">Map to pins</div>
<div class="blue">
<select class="controlItem" id="map">
<option value="0">False</option>
<option value="1">True</option>
</select>
</div>
<div class="blue label">Use as path</div>
<div class="blue">
<select class="controlItem" id="path">
<option value="0">False</option>
<option value="1">True</option>
</select>
</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 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 label">Roll</div>
<div class="yellow"><input class="controlItem" id="roll" type="range" value="0" min="0" max="360" step="0.1" /></div>
<div class="yellow label">Scale</div>
<div class="yellow"><input class="controlItem" id="scale" type="range" value="1" min="0.2" max="1.5" step="0.05" /></div>
</div>
<div class="testinfo">
<h4>Test purpose</h4>
<p>Polyline-specific tests:</p>
<ul>
<li>Create some sets of coordinate Arrays (absolute values, relative values, artefacts)</li>
<li>Create a Polyline entity from the first set of coordinates</li>
<li>Check that the tension attribute updates correctly (Polyline bendiness will change)</li>
<li>Check that the Polyline can be dragged, whatever the setting of the closed flag</li>
<li>Check that the Polyline can be pivoted, including to the mouse cursor</li>
<li>Check that the Block entitys remain attached to the Polyline in all situations</li>
<li>Check that the Polyline responds as expected when we change its pins Array</li>
<li>Check that when the Polyline is set to the Wheel coordinates Array, it responds when those Wheels are dragged into new positions</li>
<li>Check that the Polyline can be scaled, flipped and rolled.</li>
</ul>
<p>Natural and constant speed animation along a path:</p>
<ul>
<li>Check that the green and yellow 'ball' Wheels correctly follow the Polyline path at all times when 'useAsPath' flag is set, and does not break the demo when the flag is not set.</li>
<li>Confirm that the yellow 'balls' correctly move at a constant speed when animating along the Polyline path.</li>
</ul>
<p><b>Known issue:</b> when the 'useAsPath' flag is set to false, the Block pins do not position themselves as expected when the Polyline entity is rolled, flipped or scaled. If this functionality is required on a Polyline, always set its 'useAsPath' flag to true.</p>
<p><b>Touch test:</b> should work as expected</p>
<p><a href="../docs/demo/canvas-030.html">Annotated code</a></p>
</div>
<script src="canvas-030.js" type="module"></script>
</body>
</html>