js/c01canvas.php
<html>
<head>
<title> <?php echo basename(__file__, '.php'); ?> </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes"/>
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="YES" />
<style>
canvas {
touch-action:none;
border: 1px solid black;
}
</style>
</head>
<body onload="draw();">
<h1>Canvas: mouseevents or touchevents to move drawing around</h1>
<ol><li>draw a red and a blue square and connect corners of blue square to corners of canvas
</li><li>use mouseevents to drag blue square around (hold down mouse key )
</li><li>use touchevents to drag blue square around (set canvas css style <code>touch-action:none</code> to avoid mixup with scrolling )
</li></ol><br/>
<canvas id="tutorial" width="150" height="150"></canvas>
<br/>
<h1>Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
</body>
<script>
const can = document.getElementById("tutorial");
const ctx = can.getContext("2d");
var aTx = 'ini'
, o1 = {x: 30, y:30, w:50, h:50, sel: false}
, cMo = 0, cTo = 0;
function drawOld() {
ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 50, 50);
}
function drawTx() {
ctx.clearRect(10, 130, 130, 25);
ctx.fillText(aTx, 10, 140);
}
function draw() {
//a = Object.assign({}, aEv);
ctx.clearRect(0, 0, 150, 150);
// ctx.setTransform(0, 1, -1, 0, 150, 0);
ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = "rgba(" + (o1.sel ? "100, 100" : "0, 0") + ", 200, 0.5)";
ctx.fillRect(o1.x, o1.y, o1.w, o1.h);
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeStyle = "rgba(0, 0, 200, 0.5)";
ctx.moveTo(o1.x, o1.y);
ctx.lineTo(0, 0);
ctx.moveTo(o1.x + o1.w, o1.y);
ctx.lineTo(150, 0);
ctx.stroke();
ctx.beginPath();
const gradient = ctx.createLinearGradient(0, 0, 150, 0);
// Add color stops
gradient.addColorStop(0, "green");
gradient.addColorStop(0.5, "cyan");
gradient.addColorStop(1, "green");
ctx.strokeStyle = gradient;
ctx.moveTo(o1.x, o1.y+o1.h);
ctx.lineTo(0, 150);
ctx.moveTo(o1.x+o1.w, o1.y+o1.h);
ctx.lineTo(150, 150);
ctx.stroke();
drawTx();
}
function mouseAna(e) {
aTx = (e.type == 'mousedown' ? 'moDo' : (e.type == 'mousemove' ? 'moMo' : (e.type == 'mouseup' ? 'moUp' : e.type))) + ' ' + cMo + '/' + (cTo += 1);
can.aX = e.offsetX;
can.aY = e.offsetY;
aTx += " @ " + can.aX + ", " + can.aY;
}
can.addEventListener("mousedown", (e) => { // select blue square, if cursor on it
mouseAna(e);
if (e.button === 0 && can.aX >= o1.x && can.aX <= o1.x + o1.w && can.aY >= o1.y && can.aY <= o1.y + o1.h ) {
o1.sel = true;
can.mvX = o1.x - can.aX;
can.mvY = o1.y - can.aY;
draw();
// window.requestAnimationFrame(draw);
}
});
can.addEventListener("mouseup", (e) => { // unselect
mouseAna(e);
o1.sel = false;
draw();
});
can.addEventListener("mousemove", (e) => { // move blue square, if it is selected
mouseAna(e);
if (o1.sel) {
o1.x = can.aX + can.mvX;
o1.y = can.aY + can.mvY;
draw();
// window.requestAnimationFrame(draw);
} else {
drawTx();
}
});
function touchAna(e) {
aTx = (e.type == 'touchstart' ? 'toSt' : (e.type == 'touchmove' ? 'toMo' : (e.type == 'touchend' ? 'toEn' : e.type))) + ' ' + cMo + '/' + (cTo += 1);
e.preventDefault(); // avoid bubbel up of event to mouse as is done by standard
if (e.targetTouches.length < 1)
return false;
r = (t = e.targetTouches.item(0)).target.getBoundingClientRect();
aTx += t.target === can ? '=' : '!';
can.aX = Math.round(t.clientX - r.x);
can.aY = Math.round(t.clientY-r.y);
aTx += " @ " + can.aX + ", " + can.aY;
return true;
}
can.addEventListener("touchstart", (e) => {
if (touchAna(e) && can.aX >= o1.x && can.aX <= o1.x + o1.w && can.aY >= o1.y && can.aY <= o1.y + o1.h ) {
o1.sel = true;
can.mvX = o1.x - can.aX;
can.mvY = o1.y - can.aY;
}
draw();
});
can.addEventListener("touchmove", (e) => {
if (touchAna(e) && o1.sel) {
o1.x = can.aX + can.mvX;
o1.y = can.aY + can.mvY;
draw();
} else {
drawTx();
}
drawTx();
});
can.addEventListener("touchend", (e) => {
touchAna(e);
o1.sel = false;
draw();
});
</script>
</html>