Javascript 如何在画布中旋转选定元素

因此，我尝试在画布中构建一个小型图像编辑器，目前我有一些按钮，onclick将在画布上绘制一个特定的图像（buildLayers（）），然后我可以选择画布上的任何图像，并可以将其四处移动。我的下一步是添加旋转，但仅限于选定的图像。当前旋转的图像将出现，但原始图像也存在。。。另一个问题是，我无法选择旋转的图像，当我拖动原始图像时，旋转的图像会转到不同的方向，当我向右移动原始图像时，旋转的图像会向下移动

函数renderCanvas（）{
请求动画帧（renderCanvas）；
g、 clearRect（0，0，canvas.width，canvas.height）；
g2.clearRect（0，0，canvas.width，canvas.height）；
对于（var i=0；i0）{
拉边（imgX[selectedImg]，imgY[selectedImg]）；
rotareImage（imgX[selectedImg]、imgY[selectedImg]、images[selectedImg]）；
}
}
// -------------------------------------------------------------------
函数图img（x，y，images）{
g、 drawImage（图像，x-（imgWidth/2），y-（imgHeight/2），imgWidth，imgHeight）；
}
函数buildLayers（）{
对于（var layer=0；layer};您只需要旋转单个图像而不是整个画布，并且必须在对其调用
drawImg（）
之前进行旋转

在您的
renderCanvas功能中：

for (var i = 0; i < numOfImages; i++) {

    // If this image is to be rotated/bordered
    // it needs to be done now, before drawImg() is called,
    // on the layer, not on the entire canvas
    if(i===selectedImg){

        // Draw the border
        drawBorder(imgX[i], imgY[i]);

        // Overwrite the Image object with the rotated version
        imgX[i] = rotateLayer(imgX[i], 90); // 90 degree rotation
    }

    // Now add it to the canvas
    drawImg(imgX[i], imgY[i], images[i]);
}

请参见注释中的代码说明

免责声明：我只是在答案框中写了这个，没有测试它。如果你只是简单地复制和粘贴，它可能会起作用，也可能不会起作用。它的目的是向你展示如何做，而不是为你做
 只需旋转单个图像而不是整个画布，并且必须在对其调用
drawImg（）
之前进行旋转

在您的
renderCanvas功能中：

for (var i = 0; i < numOfImages; i++) {

    // If this image is to be rotated/bordered
    // it needs to be done now, before drawImg() is called,
    // on the layer, not on the entire canvas
    if(i===selectedImg){

        // Draw the border
        drawBorder(imgX[i], imgY[i]);

        // Overwrite the Image object with the rotated version
        imgX[i] = rotateLayer(imgX[i], 90); // 90 degree rotation
    }

    // Now add it to the canvas
    drawImg(imgX[i], imgY[i], images[i]);
}

请参见注释中的代码说明

免责声明：我只是在答案框中写了这个，没有测试它。如果你只是简单地复制和粘贴，它可能会起作用，也可能不会起作用。它的目的是向你展示如何做，而不是为你做
 谢谢，现在我肯定知道怎么做了。我对屏幕外的画布做了类似的事情，现在我明白了为什么它不能按预期工作。今天我在这上面浪费了好几个小时，再次感谢！哎哟，在每次旋转时创建一个新画布并调用toDataURL，然后将图像的src设置为这个dataURL只是。。。1.太慢了。因此，内存消耗3。容易掉帧。调用drawImage时，图像的新内容可能尚未加载。如果你要做一个动画旋转，那将杀死你的浏览器。您只能旋转主上下文，但将旋转定位点设置为图像的中心，而不是画布的中心。@kaido-AFAIK完全在客户端执行此操作没有其他方法。如果你有更好的答案，让我们听听！别害羞…@M.Malinowski-如果你担心整个画布在浏览器上的千分之一秒内存量巨大，那么你唯一的解决方案就是在服务器端执行。@Pamblam你真的帮了我的忙，这个项目是我为了了解更多关于canvas的知识而做的，所以你的答案让我完全满意。在这个阶段，我并不担心表现。再次感谢：）谢谢，现在我肯定知道怎么做了。我对屏幕外的画布做了类似的事情，现在我明白了为什么它不能按预期工作。今天我在这上面浪费了好几个小时，再次感谢！哎哟，在每次旋转时创建一个新画布并调用toDataURL，然后将图像的src设置为这个dataURL只是。。。1.太慢了。因此，内存消耗3。容易掉帧。调用drawImage时，图像的新内容可能尚未加载。如果你要做一个动画旋转，那将杀死你的浏览器。您只能旋转主上下文，但将旋转定位点设置为图像的中心，而不是画布的中心。@kaido-AFAIK完全在客户端执行此操作没有其他方法。如果你有更好的答案，让我们听听！别害羞…@M.Malinowski-如果你担心整个画布在浏览器上的千分之一秒内存量巨大，那么你唯一的解决方案就是在服务器端执行。@Pamblam你真的帮了我的忙，这个项目是我为了了解更多关于canvas的知识而做的，所以你的答案让我完全满意。在这个阶段，我并不担心表现。再次感谢：）如果您可以看到旋转图像及其默认版本，这只是因为您告诉画布在第一次循环调用
drawImg
中绘制默认版本，然后在
rotareImage
调用中绘制默认版本
selectedImg
可能介于
0
和
numOfImages
之间。因此，如果您想绘制它的第一个可见层，只需在循环中过滤
selectedImg
（
if（i==selectedImg）{continue；}
），或者如果您希望它在
i==selectedImg
时将z-index调用
rotareImage
保留在循环中（
if（i==selectedImg）{rotareImage（params）}否则{drawimage（params）}
）@凯伊多-谁一直投票给你？您的建议没有考虑到他的
rotareImage
函数仍在旋转整个画布。而不是绝对