javascript - 将 Canvas 上绘制的图像的坐标保存在变量/对象-HTML5 中

Question

我需要获取最后绘制的形状的坐标，以便能够对其应用缩放、旋转等变换。这是我用来绘制形状的代码部分:

function drawPolygon(position, sides, angle) {
var coordinates = [],
    radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2)),
    index = 0;

for (index = 0; index < sides; index++) {
    coordinates.push({x: dragStartLocation.x + radius * Math.cos(angle), y: dragStartLocation.y - radius * Math.sin(angle)});
    angle += (2 * Math.PI) / sides;
}

context.beginPath();
context.moveTo(coordinates[0].x, coordinates[0].y);
for (index = 1; index < sides; index++) {
    context.lineTo(coordinates[index].x, coordinates[index].y);
}

context.closePath();
context.stroke();
context.strokeStyle = strokeColor.value;

}

如何保存坐标以供以后使用？任何帮助将不胜感激。谢谢。

Answer 1

我建议像 OOP 那样做。不知道你的目标是什么，但我认为将会绘制更多的形状，你可能会将它们存储在类似数组的对象中。

另外，我认为您是通过拖拽开始和拖拽结束来绘制它们的。您希望通过传递这些值来创建 Polygon 对象。

function Polygon(dragStartLocation, dragEndLocation, sides, angle) {

    { // init
        this.coordinates = [];
        this.radius = Math.sqrt(Math.pow((dragStartLocation.x - dragEndLocation.x), 2) + Math.pow((dragStartLocation.y - dragEndLocation.y), 2));
        this.strokeColor = {value: "#000000"}; // maybe also change color of the stroke

        for(index = 0; index < sides; index++) {
            this.coordinates.push({x: dragStartLocation.x + this.radius * Math.cos(angle), y: dragStartLocation.y - this.radius * Math.sin(angle)});
            angle += (2 * Math.PI) / sides;
        }
    }

    this.render = function() {
        context.beginPath();
        context.moveTo(this.coordinates[0].x, this.coordinates[0].y);
        for (index = 1; index < sides; index++) {
            context.lineTo(this.coordinates[index].x, this.coordinates[index].y);
        }

        context.closePath();
        context.strokeStyle = this.strokeColor.value;
        context.stroke();
    }
}

当拖动停止时，您可以创建这些对象。例如，当您的拖动从 (100,100) 开始并在 (200, 200) 结束时。多边形的中点将为 (100, 100)。

new Polygon({x: 100, y: 100}, {x: 200, y: 200}, 8, 1);

然后您可以将其存储在变量或数组中。

var list = new Array(
    new Polygon({x: 100, y: 100}, {x: 200, y: 200}, 8, 1), 
    new Polygon({x: 100, y: 100}, {x: 300, y: 300}, 12, 1)
);

之后你就可以轻松地绘制它们了:

for(var i = 0; i < list.length; i++) {
    list[i].render();
}

这是访问对象字段的方式。

list[i].coordinates;

但是当您还想要平移、缩放和旋转时，您可能想要存储一些其他字段，并可能计算相对于某个点的坐标。那么转换就会更容易。