在画布上相对绘制线阵列 [英] Draw line array relatively on canvas
问题描述
您好，相对于鼠标点击，我在画布上绘制 3 条线时遇到了一些问题.
Hello I'm having some trouble with drawing 3 lines on a canvas relatively to my mouse click.
这 3 条线组成了一张小笑脸.
The 3 lines make a small smiley face.
所以在我的代码中，我有一个名为 parseRecordedLinePoints() 的函数，在这个函数中，它使每一行的点相对于我的鼠标，然后在画布上描边.
So in my code I have a function called parseRecordedLinePoints(), In this function it makes the points from each line relative to my mouse, then strokes it on the canvas.
出于某种原因，当它被调用并抚摸画布时，眼睛会在彼此上方抚摸.(重叠)
For some reason when it's called and strokes the canvas, the eyes get stroked above each other. (overlaps)
我试图通过将函数更改为:
I've tried to fix it by changing the function to:
function parseRecordedLinePoints(Point, index, arr) {
ctx.lineTo(Point.x, Point.y);
ctx.stroke();
}
当这个函数是这样画笑脸的时候，但不是相对的，线条是相互连接的.
When the function is like this it draws the smiley, but not relatively and the lines connect to each other.
这是当前作为片段的代码，因此您可以更好地查看.您可以看到它如何将眼睛绘制在错误的位置，并将它们直接重叠在我的鼠标下方.我试图让它相对正确地绘制笑脸.
Here's the code currently as an snippet, so you can get a better look. You can see how it draws the eyes in the wrong position, and overlaps them directly under my mouse. I'm trying to make it draw the smiley face correctly relatively.
代码:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var cursorX = 100; //Example position X
var cursorY = 0; //Example position Y
var relX = 0;
var relY = 0;
//3 lines // A smiley face.
var recordedLines = [{
Color: {
r: 0,
g: 50,
b: 0
},
LinePoints: [{
x: 125,
y: 370.2
},
{
x: 125,
y: 367.9
},
{
x: 127.2,
y: 365.7
},
{
x: 128.4,
y: 367.9
},
{
x: 127.2,
y: 370.2
},
{
x: 125,
y: 371.3
},
{
x: 122.8,
y: 370.2
},
{
x: 121.7,
y: 367.9
},
{
x: 121.7,
y: 364.6
},
{
x: 123.9,
y: 363.5
},
{
x: 127.2,
y: 363.5
},
{
x: 128.4,
y: 365.7
},
{
x: 128.4,
y: 369
},
{
x: 126.1,
y: 370.2
},
{
x: 123.9,
y: 369
},
{
x: 122.8,
y: 366.8
},
{
x: 123.9,
y: 364.6
},
{
x: 127.2,
y: 364.6
},
{
x: 127.2,
y: 367.9
},
{
x: 125,
y: 369
},
{
x: 123.9,
y: 366.8
},
{
x: 123.9,
y: 366.8
}
]
},
{
Color: {
r: 100,
g: 0,
b: 0
},
LinePoints: [{
x: 168.4,
y: 365.7
},
{
x: 166.1,
y: 366.8
},
{
x: 163.9,
y: 363.5
},
{
x: 166.1,
y: 362.4
},
{
x: 168.4,
y: 363.5
},
{
x: 167.2,
y: 365.7
},
{
x: 163.9,
y: 365.7
},
{
x: 163.9,
y: 362.4
},
{
x: 165,
y: 360.2
},
{
x: 168.4,
y: 360.2
},
{
x: 169.5,
y: 363.5
},
{
x: 168.4,
y: 365.7
},
{
x: 165,
y: 365.7
},
{
x: 163.9,
y: 363.5
},
{
x: 165,
y: 360.2
},
{
x: 168.4,
y: 360.2
},
{
x: 168.4,
y: 363.5
},
{
x: 168.4,
y: 364.6
}
]
},
{
Color: {
r: 100,
g: 0,
b: 0
},
LinePoints: [{
x: 107.2,
y: 377.9
},
{
x: 109.5,
y: 379
},
{
x: 110.6,
y: 381.3
},
{
x: 112.8,
y: 382.4
},
{
x: 115,
y: 384.6
},
{
x: 117.2,
y: 386.8
},
{
x: 119.5,
y: 387.9
},
{
x: 122.8,
y: 389
},
{
x: 126.1,
y: 390.2
},
{
x: 129.5,
y: 391.3
},
{
x: 132.8,
y: 391.3
},
{
x: 136.1,
y: 391.3
},
{
x: 139.5,
y: 392.4
},
{
x: 142.8,
y: 392.4
},
{
x: 146.1,
y: 392.4
},
{
x: 149.5,
y: 392.4
},
{
x: 152.8,
y: 392.4
},
{
x: 156.1,
y: 391.3
},
{
x: 159.5,
y: 390.2
},
{
x: 161.7,
y: 389
},
{
x: 165,
y: 389
},
{
x: 167.2,
y: 387.9
},
{
x: 169.5,
y: 386.8
},
{
x: 171.7,
y: 385.7
},
{
x: 173.9,
y: 384.6
},
{
x: 176.1,
y: 383.5
},
{
x: 178.4,
y: 382.4
},
{
x: 179.5,
y: 380.2
},
{
x: 181.7,
y: 379
},
{
x: 182.8,
y: 376.8
},
{
x: 183.9,
y: 375.7
}
]
}
];
//----------------------------------
//var relativeARRAY = []; //recordedLines array, but relative to mouse.
//var color = [{ r: 0, g: 0, b: 0 }];
function parseRecordedLinePoints(Point, index, arr) {
relX = Point.x - arr[0].x;
relY = Point.y - arr[0].y;
ctx.lineTo(relX + cursorX, relY + cursorY);
ctx.stroke();
}
//----------------------------------
function parseRecordedLine(Line, index, arr) {
const LinePoints = Line.LinePoints;
//-- parse the x and y points of this line.. to make relative..
LinePoints.forEach(parseRecordedLinePoints);
}
//----------------------------------
c.addEventListener(
"click",
function(e) {
cursorX = e.clientX;
cursorY = e.clientY;
ctx.moveTo(cursorX, cursorY);
recordedLines.forEach(parseRecordedLine);
},
false
);<canvas id="myCanvas" width="600" height="600" style="border: 1px solid #d3d3d3;"></canvas>推荐答案
不确定您是否必须将所有这些要点用于您正在处理的工作，但这是一个简化版本.
Not sure if you have to use all those points for what you’re working on but here’s a simplified version.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
let mouse = {
x: null,
y: null,
}
window.addEventListener('click', function(e) {
mouse.x = e.x;
mouse.y = e.y;
drawFace();
});
function drawFace() {
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(mouse.x, mouse.y, 5, 0, Math.PI * 2);
ctx.arc(mouse.x + 30, mouse.y, 5, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(mouse.x + 14, mouse.y + 9, 30, 0.3, Math.PI / 1.1)
ctx.stroke();
ctx.closePath();
}
对于您的代码，您需要在开始新抽奖时使用 moveTo.lineTo 将从上一点继续绘制.moveTo 拿起笔并将其移动到新的起始位置.
For your code you need to use moveTo when starting a new draw. lineTo will continue drawing from the previous point. moveTo picks up the pen and moves it to a new start location.
这篇关于在画布上相对绘制线阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
