旋轉後的Canvas鼠標座標

Im在鼠標單擊時從形狀的中心繪製線條。這工作正常，直到我對div元素執行一個旋轉保存畫布元素。以下是基本的Javascript。 rotateWrapper獲得由按鈕別處頁面上稱爲旋轉後的Canvas鼠標座標

var p; 
var rot = 0; 
var canvas; 
var ctx; 

function rotateWrapper() { 
    if (rot == 0) rot = 180; 
    else rot = 0; 
    $("#wCanvas").rotate({ animateTo:rot,duration:2500}); 
} 

function draw() { 
    ctx.save(); 
    ctx.moveTo(p[0], p[1]); 
    ctx.lineTo(p[2], p[3]); 

    ctx.closePath(); 
    ctx.stroke(); 
    ctx.restore(); 
} 

$(document).ready(function() { 
    canvas = $("#imgCanvas").get(0); 
    ctx = canvas.getContext("2d"); 
    $("#imgCanvas").bind({ 
    mouseup: function(ev) { 
     p[2] = ev.pageX; 
     p[3] = ev.pageY; 
    }, 
    mousedown: function(ev) { 
     p = new Array(4); 
     p[0] = $("#wCanvas").width()/2; 
     p[1] = $("#wCanvas").height()/2; 
    } 
    }); 
}

我敢肯定，我在想念着一些基本的東西，但是這是推動我逼瘋了。我曾嘗試旋轉draw方法中的上下文，數量爲rot，以及它的倒數。因爲Im旋轉容器元素Im認爲這與CSS變化干擾事物有關，但並不確定。

任何見解都將不勝感激

來源

2013-12-15 Vaughan Durno

「rotate」將旋轉旋轉後繪製的元素的畫布。沒有看到rotateWrapper和draw是如何調用的，很難說出你應該如何構造代碼。但基本上，您應該在應用旋轉之後重繪。您可能想要存儲旋轉值，並調用中心重繪例程，該例程將首先應用旋轉，然後重繪。

來源

2013-12-15 09:54:09 dhc

旋轉後的Canvas鼠標座標

回答

相關問題