如何移动旋转的画布图像whitout迷失方向？

Question

我有一个图像加载到画布中.旋转后,我无法(拖动)正确移动图像.实际上,它会移动,但会根据图像的坐标平面移动.因此,向右移动90度旋转图像,向下移动,而不是按预期向右移动.什么是解决这个问题的好方法？

这是我的绘图功能:

function draw(){
    var im_width = parseInt( imageObj.width + resizeAmount );
    var im_height = parseInt( imageObj.height + resizeAmount );
    var rotationAmount = rotationVal - prevRotation;
    prevRotation = rotationVal;

    context.clearRect( 0, 0, canvas.width, canvas.height );
    context.translate( canvas.width/2, canvas.height/2 );
    context.rotate( rotationAmount * Math.PI / 180 );
    context.translate( -canvas.width/2, -canvas.height/2 );
    context.drawImage( imageObj, moveXAmount, moveYAmount, im_width, im_height );     
} 

这是jsdiddle,你可以在其中模拟它,看看我的意思.

PS:您可以使用左侧的滑块旋转图像.底部滑块用于缩放.如果图像没有出现在第一次加载中,请重新运行小提琴.

Answer 1

绘图后重置转换.鼠标事件在应用于画布上下文时也会被转换,因此只有在绘图可以解决此问题时才使用变换.但是,这也要求代码使用绝对值,例如:

function draw(){
    var im_width = parseInt( imageObj.width + resizeAmount, 10 );
    var im_height = parseInt( imageObj.height + resizeAmount, 10 );
    var rotationAmount = rotationVal; // disabled: - prevRotation;

    context.clearRect( 0, 0, canvas.width, canvas.height );

    // move to origin first
    context.translate( moveXAmount, moveYAmount );

    // rotate
    context.rotate( rotationAmount * Math.PI / 180 );

    // change to translate back based on image size
    // (remember to compensate for scale, not shown here)
    context.translate( -imageObj.width/2, -imageObj.height/2 );
    context.drawImage( imageObj, 0, 0, im_width, im_height );

    // reset transforms (identity matrix)
    context.setTransform(1,0,0,1,0,0);
} 

修改小提琴

您可以选择使用逆矩阵.当我们可以根据当前的转换矩阵取出SVGMatrix时,这将会变得可用,但目前还没有广泛使用.否则,逆矩阵将应用于鼠标x/y位置,如名称所示,对主变换的效果进行反转.

视需要使用自定义转换矩阵解决方案来跟踪转化的(我会请你看看我自己的办法处理这一这里,它是免费的).

PS:还修复了图像加载问题(见小提琴).