更改已在画布上绘制的任何内容

Question

我有 2 个画布。我要做的是在第二个画布上绘制形状（即一条线）。当我想对这条绘制的线应用变换（旋转、缩放等）时，我会修改第一个画布的上下文并在上面画我的第二个画布。完美地工作。现在，当我想在第二个画布上再次绘制形状（即一条线）（带有变换）时，我在第二个画布上画了第一个画布并在上面画了一条线。工作得很好。现在问题发生了。当我再次想对这条线应用转换（旋转、缩放等）时，我修改了第一个画布的上下文并在上面绘制了第二个画布。但是这一次，当我在第一个画布上绘制时，我得到了突然的变化（绘制第二个画布）。这是由于在第二个画布上绘制第一个画布并再次将第二个画布绘制到第一个画布所应用的转换。有没有办法更改（重置或修改）已经在画布上绘制的任何内容？

var cantem = document.getElementById('canvasTemp1');  //second canvas
    var ctxtem = cantem.getContext('2d');

    var canMan = document.getElementById('canvasTempMan');    //first canvas
    canMan.style.visibility = "visible";
    var ctxcanman = canMan.getContext('2d');

    var sWidth = getCanvasWidth();               //returns canvas width
    var sHeight = getCanvasHeight();             //returns canvas height

    canMan.height = sHeight;
    canMan.width = sWidth;

    cantem.style.visibility = "hidden";



    ctxcanman.setTransform(1, 0, 0, 1, 0, 0);
    ctxcanman.clearRect(0, 0, cantem.width, cantem.height);

    ctxcanman.translate(sWidth / 2, sHeight / 2);


    ctxcanman.scale(ZoomFactor, ZoomFactor);
    ctxcanman.rotate(RotateAngle * Math.PI / 180);

    ctxcanman.translate(-sWidth / 2, -sHeight / 2);


    ctxcanman.drawImage(cantem, 0, 0, cantem.width, cantem.height, OffsetX, OffsetY, sWidth, sHeight);
    ctxcanman.save();

现在我在这里将我的第一个画布绘制到第二个-->

 var can = document.getElementById('canvasTempMan');
    can.style.visibility = "hidden";
    var cantem = document.getElementById('canvasTemp1');
    var ctxannotate = cantem.getContext("2d");
    ctxannotate.setTransform(1, 0, 0, 1, 0, 0);
    ctxannotate.clearRect(0, 0, cantem.width, cantem.height);

    ctxannotate.save();
    ctxannotate.drawImage(can, 0, 0, cantem.width, cantem.height, OffsetX, OffsetY, can.width, can.height);

我使用鼠标事件和简单的上下文函数（如 moveTo、lineTo 等）在我的第二个画布上绘制（形状即线条）。

Answer 1

画布中没有元素。在画布上绘制的内容通常不能被隔离（除非您谈论的是单个像素操作）。

您可以将所有内容以对象的形式存储在代码中，而不是将您的工作（形状、旋转和运动）存储在画布上，然后您可以单独处理这些对象，甚至可以进一步操作甚至删除。

如果您“记录”所有动作，您将完全控制画布上显示的内容。

例如，您可以有一个创建线条的函数：

function myLine (xStart, yStart, xEnd, yEnd, deg) {
    this.xS = xStart;
    this.yS = yStart;
    this.xE = xEnd;
    this.xE = yEnd;

    //if needed you can also save the number of degrees that the line has been rotated
    this.deg = deg;
}

只需在开始时创建一个空数组

var myLines = new Array();

并在其中添加您的行：

var newLine = new myLine(100,50,200,70,0);
myLines.push(newLine);

例如，圆圈也可以这样做

function myCircle(x,y,radius) {
    this.x = x;
    this.y = y;
    this.r = radius;
    //no point in trying to rotate a circle so leaving the degrees out
}

通过这种方式，通过存储您的作品，您可以通过循环遍历形状数组来一次绘制全部（或选定的部分）。

您仍然可以使用两个画布，一个显示所有绘制的形状，另一个显示与鼠标移动事件相关的操作，就像您在问题中描述的那样。

在 scale()/rotate()/translate() 处于活动状态时绘图

请看这里回答：Returning un-transformed mouse coordinates after rotating an object on html5 canvas