scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
63 lines (50 loc) • 2.23 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 Particles 016</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
#my-image-store {
display: none;
}
canvas {
margin: 0 auto;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - Particles test 016</h1>
<h2>Mesh entitys</h2>
<h3>To change image, drag-and-drop an image file over the canvas</h3>
<h3>The red beads are draggable</h3>
<canvas
id="mycanvas"
width="600"
height="400"
data-scrawl-canvas
data-base-background-color="azure"
></canvas>
<p id="reportmessage"></p>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Create a Net entity with 4 rows and 6 columns; remove all springs from the net particles; apply no forces to the particles; make the particles draggable.</li>
<li>Import the image asset and use it to create a Picture entity; set the Picture's visibility attribute to false.</li>
<li>Combine the Net and Picture entitys into a Mesh entity.</li>
<li>Check that when the user drags a particle, the image deforms appropriately.</li>
<li>Check that dragging any of the pins does not lead to the last row not displaying (bug is specific to Safari browsers - see <a href="https://stackoverflow.com/questions/35500999/cropping-with-drawimage-not-working-in-safari">this question on Stack Overflow</a></li>
<li>Check that the orange stroke only draws around the outside vertices of the Mesh, and that mose hovers within the stroke are correctly recognised (by the stroke width expanding).</li>
</ul>
<p><b>Touch test:</b> should work as expected. Known issue: moving the pins is inconsistent (because they are too small on device screens?)</p>
<p><a href="../docs/demo/particles-016.html">Annotated code</a></p>
</div>
<script src="particles-016.js" type="module"></script>
<div id="my-image-store">
<img id="iris" src="img/iris.png" class="flowers" />
</div>
</body>
</html>