旋转后鼠标移动不准确

Question

我有两个画布，当我在第一个画画时，我希望能够绘制完全相同的东西，但在第二个画面中像镜子一样翻转。

所以我尝试使用CSS Transform，但它使第二个Canvas上的鼠标移动不准确。 这是我的代码： http://jsfiddle.net/q5vZc/

#paint {
    width: 100%;
    height: 50%;
    float: left;
}
#paint2 {
    float: right;
    width: 100%;
    height: 50%;
    /*pointer-events: none;*/
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

有没有办法解决这个问题？

我创建了一个在第二个画布上翻转鼠标移动的函数。我在其中传递了点击它的鼠标点和画布的宽度。

function flipHorizontal(ponto, width) {
    var x_linha = (width- ponto.x);
    var y_linha = (ponto.y);

    var flipped = {
        x: x_linha,
        y: y_linha
    };

    return flipped;
}

Answer 1

除非你掌握它，否则不要使用css缩放，否则会出现奇怪的结果。

在您的情况下，最简单的方法是删除任何css，然后手动将左半部分复制到右侧部分。

因此，只使用一个画布，仅在左侧部分绘制，每次完成绘图时，调用此函数使左侧部分镜像：

// copy the the left part of the canvas on its right part
function mirrorContext(context) {
    var canvas = context.canvas;
    var width  = canvas.width;
    var height = canvas.height;
    // preserve context
    context.save();
    // translate to middle of right part of canvas
    context.translate(3*width/4, height/2); 
    // flip x direction
    context.scale(-1, 1);
    // draw left part on right part, reversed
    context.drawImage(canvas                       
/* take left part of canvas... */  ,0, 0, width/2, height  
/* ... copy it on right part */   ,-width/4, -height/2, width/2, height
                       );
    // cancel any context change
    context.restore();
}

http://jsbin.com/gigazeka/1/edit?js,output