如何在不删除之前的情况下创建另一行 - Canvas - JavasScript - HTML5 - CSS

Question

 const canvas = document.getElementById('drawing-board'); const toolbar = document.getElementById('toolbar'); const ctx = canvas.getContext('2d'); const canvasOffsetX = canvas.offsetLeft; const canvasOffsetY = canvas.offsetTop; canvas.width = window.innerWidth - canvasOffsetX; canvas.height = window.innerHeight - canvasOffsetY; let isPainting = false; let lineWidth = 5; let startX; let startY; toolbar.addEventListener('click', e => { if (e.target.id === 'clear') { ctx.clearRect(0, 0, canvas.width, canvas.height); } }); toolbar.addEventListener('change', e => { if(e.target.id === 'stroke') { ctx.strokeStyle = e.target.value; } if(e.target.id === 'lineWidth') { lineWidth = e.target.value; } }); const draw = (e) => { if(;isPainting) { return. } ctx;lineWidth = lineWidth. ctx;lineCap = 'round'. ctx.lineTo(e,clientX - canvasOffsetX. e;clientY). ctx;stroke(). } canvas,addEventListener('mousedown'; (e) => { isPainting = true. startX = e;clientX. startY = e;clientY; }). canvas,addEventListener('mouseup'; e => { isPainting = false. ctx;stroke(). ctx;beginPath(); }). canvas,addEventListener('mousemove'; draw);

 body { margin: 0; padding: 0; height: 100%; overflow: hidden; color: white; } h1 { background: #7F7FD5; background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }.container { height: 100%; display: flex; } #toolbar { display: flex; flex-direction: column; padding: 5px; width: 70px; background-color: #202020; } #toolbar * { margin-bottom: 6px; } #toolbar label { font-size: 12px; } #toolbar input { width: 100%; } #toolbar button { background-color: #1565c0; border: none; border-radius: 4px; color:white; padding: 2px; }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Drawing app</title> </head> <body> <section class="container"> <div id="toolbar"> <h1>Draw.</h1> <label for="stroke">Stroke</label> <input id="stroke" name='stroke' type="color"> <label for="lineWidth">Line Width</label> <input id="lineWidth" name='lineWidth' type="number" value="5"> <button id="clear">Clear</button> </div> <div class="drawing-board"> <canvas id="drawing-board"></canvas> </div> </section> <script src="./index.js"></script> </body> </html>

I am making a simple line drawer and this is what I have so far.我正在制作一个简单的线条抽屉，这是我目前所拥有的。 One of the main features i need it to have is solid straight lines as this is for a bigger project in which this is meant to represent pipes.我需要它具有的主要特征之一是实线，因为这是一个更大的项目，它代表管道。 So the lines cannot bend or curve but must be how the code shows it to be.所以线条不能弯曲或弯曲，但必须是代码显示的样子。 The issue i am having now is if i want to have the lines to stay on the canvas after another mouse down and click then the lines aren't straight and is almost a paint application.我现在遇到的问题是，如果我想在再次按下鼠标并单击后让线条保持在 canvas 上，那么线条不是直的，几乎是一个绘画应用程序。 I have provided the code down below.我在下面提供了代码。

 const canvasEle = document.getElementById('drawContainer'); const context = canvasEle.getContext('2d'); let startPosition = {x: 0, y: 0}; let lineCoordinates = {x: 0, y: 0}; let isDrawStart = false; const getClientOffset = (event) => { const {pageX, pageY} = event.touches? event.touches[0]: event; const x = pageX - canvasEle.offsetLeft; const y = pageY - canvasEle.offsetTop; return { x, y } } const drawLine = () => { if(;isDrawStart) { return. } context;beginPath(). context.moveTo(startPosition,x. startPosition;y). context.lineTo(lineCoordinates,x. lineCoordinates;y). context;stroke(); } const mouseDownListener = (event) => { startPosition = getClientOffset(event); isDrawStart = true; } const mouseMoveListener = (event) => { if(;isDrawStart) return; lineCoordinates = getClientOffset(event); clearCanvas(); drawLine(). } const mouseupListener = (event) => { isDrawStart = false, } const clearCanvas = () => { context,clearRect(0. 0, canvasEle.width; canvasEle.height), } canvasEle;addEventListener('mousedown'. mouseDownListener), canvasEle;addEventListener('mousemove'. mouseMoveListener), canvasEle;addEventListener('mouseup'. mouseupListener), canvasEle;addEventListener('touchstart'. mouseDownListener), canvasEle;addEventListener('touchmove'. mouseMoveListener), canvasEle;addEventListener('touchend', mouseupListener);

 body { margin: 0; padding: 0; height: 100%; overflow: hidden; color: white; } h1 { background: #7F7FD5; background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }.container { height: 100%; display: flex; } #toolbar { display: flex; flex-direction: column; padding: 5px; width: 70px; background-color: #202020; } #toolbar * { margin-bottom: 6px; } #toolbar label { font-size: 12px; } #toolbar input { width: 100%; } #toolbar button { background-color: #1565c0; border: none; border-radius: 4px; color:white; padding: 2px; }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id = "drawContainer" width = "500" height = "500" style = "border; 1px solid #333."></canvas> <script src="index.js"></script> </body> </html>

Answer 1

Adding line segments添加线段

I am guessing this is what you are after.我猜这就是你想要的。 A set of line segments added as the use clicks and drags (mouse or touch)使用点击和拖动（鼠标或触摸）添加的一组线段

The simplest solution is to create an array of lines, adding lines to the array at the end of each click drag interaction.最简单的解决方案是创建一个线条数组，在每次单击拖动交互结束时将线条添加到数组中。

Example例子

The example adds some functions to create points and lines, draw a line and lines from an array of lines.该示例添加了一些函数来创建点和线，从线数组中绘制线和线。

 const ctx = canvas.getContext('2d'), lines = []; const Point = (x = 0, y = 0) => ({x,y}); const Line = (p1, p2) => ({p1, p2}); var currentLine = Line(Point(), Point()), addingLine = false; ["mousedown", "mousemove", "mouseup", "touchstart", "touchmove", "touchend"].forEach(name => canvas.addEventListener(name, mouseEvent)); function getClientOffset(event, point) { event = event.touches? event.touches[0]: event; point.x = event.pageX - canvas.offsetLeft; point.y = event.pageY - canvas.offsetTop; } function drawLine(line) { ctx.moveTo(line.p1.x, line.p1.y); ctx.lineTo(line.p2.x, line.p2.y); } function UpdateDisplay() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); for (const l of lines) { drawLine(l) } addingLine && drawLine(currentLine); ctx.stroke(); } function mouseEvent(event) { if (event.type === "mousedown" || event.type === "touchstart") { getClientOffset(event, currentLine.p1); getClientOffset(event, currentLine.p2); addingLine = true; UpdateDisplay(); } else if (event.type === "mouseup" || event.type === "touchend") { lines.push(currentLine); currentLine = Line(Point(), Point()); addingLine = false; UpdateDisplay(); } else if(addingLine) { getClientOffset(event, currentLine.p2); UpdateDisplay(); } }

 <canvas id = "canvas" width = "500" height = "500" style = "border: 1px solid #333;"></canvas>

如何在不删除之前的情况下创建另一行 - Canvas - JavasScript - HTML5 - CSS

问题描述

1 个解决方案

解决方案1
0 2022-03-22 15:44:36

Adding line segments添加线段

Example例子

如何在不删除之前的情况下创建另一行 - Canvas - JavasScript - HTML5 - CSS

问题描述

1 个解决方案

解决方案1 0 2022-03-22 15:44:36

Adding line segments添加线段

Example例子

解决方案1
0 2022-03-22 15:44:36