时间戳

首页 > 解决方案 > 在画布上相对绘制线阵列

javascript - 在画布上相对绘制线阵列

问题描述

您好，相对于鼠标单击，我在画布上绘制 3 条线时遇到了一些麻烦。

3 条线构成一个小笑脸。

所以在我的代码中，我有一个名为parseRecordedLinePoints()的函数，在这个函数中，它使每一行的点相对于我的鼠标，然后在画布上描边。

由于某种原因，当它被调用并抚摸画布时，眼睛会相互抚摸。（重叠）

我试图通过将函数更改为：

    function parseRecordedLinePoints(Point, index, arr) {
      ctx.lineTo(Point.x, Point.y);
      ctx.stroke();
    }

当函数是这样的时候，它会绘制笑脸，但不是相对的，线条相互连接。

这是当前作为片段的代码，因此您可以更好地查看。你可以看到它是如何将眼睛画在错误的位置，并直接在我的鼠标下方重叠的。我试图让它相对正确地绘制笑脸。

代码： 

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>

标签： javascriptarrayscanvasmouse

解决方案

不确定您是否必须将所有这些要点用于您的工作，但这是一个简化版本。

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 拿起笔并将其移动到新的开始位置。

推荐阅读