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();

现在我在这里画第一个画布到第二个 - ＆gt;

 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

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

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

如果你＆＃34;记录＆＃34;你所有的行动，你将完全控制画布上的内容。

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

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

更改已在画布上绘制的所有内容

1 个答案: