旋转后鼠标移动不准确答案

【问题标题】：Mouse movement not accurate after rotation旋转后鼠标移动不准确
【发布时间】：2014-09-24 15:28:25
【问题描述】：

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

所以我尝试使用 CSS 变换，但它使鼠标在第二个画布上的移动不准确。这是我的代码： 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;
}

【问题讨论】：

“不准确”是什么意思？对我来说看起来很准确：S
点击第二个画布，鼠标不准
啊，现在我明白你的意思了：P
有办法解决这个问题吗？
我一直在尝试，但没有成功。话虽如此，我不是 javascript/jquery 的专家 ^^

标签： css html canvas fabricjs

【解决方案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

【讨论】：