Issue
I found code on someone's fiddle to stroke on mouse move (click and move strokes). My requirement is to stroke rectangle on a SVG with mouse move in the same way. Is it possible, if yes, how?
//Canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
//Variables
let canvasx = canvas.offsetLeft;
let canvasy = canvas.offsetTop;
let last_mousex = 0;
let last_mousey = 0;
let mousex = 0;
let mousey = 0;
let mousedown = false;
//Mousedown
canvas.onmousedown = ({
clientX,
clientY
}) => {
last_mousex = parseInt(clientX - canvasx);
last_mousey = parseInt(clientY - canvasy);
mousedown = true;
};
//Mouseup
canvas.onmouseup = () => mousedown = false;
//Mousemove
canvas.onmousemove = ({
clientX,
clientY
}) => {
mousex = parseInt(clientX - canvasx);
mousey = parseInt(clientY - canvasy);
if (mousedown) {
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
ctx.beginPath();
const width = mousex - last_mousex;
const height = mousey - last_mousey;
ctx.rect(last_mousex, last_mousey, width, height);
ctx.strokeStyle = 'black';
ctx.lineWidth = 10;
ctx.stroke();
}
};canvas {
cursor: crosshair;
border: 1px solid #000000;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
</body>
</html>Some Code// To prevent Stackoverflow error, please ignore
Solution
Tweaked Jason's answer to create rect element on the fly
const svg = document.querySelector('#svg');
const svgNS = svg.namespaceURI;
const rect = document.createElementNS(svgNS, 'rect');
let last_mousex = 0;
let last_mousey = 0;
let mousex = 0;
let mousey = 0;
let mousedown = false;
//Mousedown
svg.onmousedown = ({
x,
y
}) => {
last_mousex = x;
last_mousey = y;
mousedown = true;
};
//Mouseup
svg.onmouseup = () => mousedown = false;
//Mousemove
svg.onmousemove = ({
x,
y
}) => {
mousex = parseInt(x);
mousey = parseInt(y);
if (mousedown) {
const width = Math.abs(mousex - last_mousex);
const height = Math.abs(mousey - last_mousey);
rect.setAttributeNS(null, 'x', last_mousex);
rect.setAttributeNS(null, 'y', last_mousey);
rect.setAttributeNS(null, 'width', width);
rect.setAttributeNS(null, 'height', height);
rect.setAttributeNS(null, 'fill', "none");
rect.setAttributeNS(null, 'stroke', "black");
rect.setAttributeNS(null, 'stroke-width', 5);
// svg.innerHTML = "";
svg.appendChild(rect);
}
};svg {
cursor: crosshair;
border: 1px solid #000000;
}<svg id="svg" width="800" height="500">
</svg>Answered By - dota2pro
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.