旋轉並翻譯畫布元素特定位置

Question

我在畫布元素上工作，並在旋轉畫布元素的某個位置進行了掃描。

隨着我的項目用戶在畫布上單擊任意位置，並通過fillText方法

生成文本

其確定，所以far.But當用戶嘗試將它旋轉basicly因爲我對翻譯和與具體座標-translate問題stucked失敗。我在互聯網上研究了所有使用畫布中心的例子。我不能使用它，因爲我的畫布大小2406 * 2406和生成的文本必須在用戶點擊的座標下維護。

我希望我描述得很好，因爲英語不是我的主要語言。 感謝您的未來幫助..

Answer 1

想象一下，畫布是頁面上的一張網格紙。這個網格文件被稱爲變換矩陣。左上角是原點（x：0，y：0），x向右，y沿着頁面向下。你所畫的一切都是相對於這一點，沿着它的x和y。因此，在200,200處繪製文本的右側是200像素，距離原點向下200像素（左上角）。

如果使用translate，rotate，scale，setTransform或transform，則移動頁面上的網格紙。假設你以200,200翻譯。您已將原點右移200像素，下移200像素。現在，如果您在200,200處繪製文本，它仍然與網格紙的原點相關，該網格紙現在不在左上角。您的文字從左上角400 x 400像素結束。如果要在與翻譯前相同的位置繪製文本，則必須更改爲座標以說明翻譯。

旋轉改變了網格的方向。以Math.PI/2（90度）順時針旋轉，結果在網頁上橫向坐着。沿x方向移動不再從左到右，而是從上到下。

和規模擴大合同網格文件。比例大於1會增加每個網格的大小，縮放比小於1會減小每個網格的大小。

使用翻譯，縮放和旋轉的組合可讓您將網格紙放置在頁面的任何位置。當你繪製文字或任何東西時，你總是將它與網格對齊。

舉例說明如何繪製縮放旋轉翻譯文本。請花時間瞭解正在發生的事情。如果您有任何問題，請詳細說明我的問題。 （手指交叉，因爲我希望這個作品，因爲這是我第一次嘗試使用計算器代碼片段的東西）

// use matix 
 
var useMatrix = false; // how to create the transformation 
 

 
// mouse stuff 
 
var mouse = { 
 
    x:0, 
 
    y:0, 
 
}; 
 
function mouseMove(event){ // mouse event handler with firefox mod 
 
    mouse.x = event.offsetX; 
 
    mouse.y = event.offsetY; 
 
    if(mouse.x === undefined){ // if firefox 
 
     mouse.x = event.clientX; 
 
     mouse.y = event.clientY; 
 
    }  
 
} 
 

 
var ctx; 
 
if(ctx === undefined){ // create the canvas if it does not exist 
 
    var can = document.getElementById("canvasID"); 
 
    if(can !== null){ 
 
     ctx = can.getContext("2d"); // get the context 
 
     can.addEventListener('mousemove',mouseMove); // add the mouse 
 
    } 
 
} 
 

 
// some stuff to animate some text 
 
var angle = 0;   // 
 
var angleDelta = 0.1; // rate of change for angle 
 
var scaleX = 1;   // to hold scale x and y 
 
var scaleY = 1; 
 
var counter = 0;   // counter used to change scale over time 
 
var counterDelta = 0.1; // rate of scale change 
 
var scaleFunction = function(){ // function to do scale change 
 
    scaleX = Math.sin(counter)*0.4 + 1; 
 
    scaleX = Math.cos(counter)*0.4 + 1; 
 
    counter += counterDelta; 
 
} 
 

 
// The drawing function will call the drawing callback after it has 
 
// set the coordinate system to the desired position,rotation and scale. 
 
// set coordinates to 
 
// translate x,y 
 
// rotate angle in radians 
 
//    0 is no rotation 
 
//    Math.PI/2 is clockwise 90 deg 
 
//    -Math.PI/2 is antiClockwise 90 deg 
 
//    Math.PI is 180 deg 
 
// scale sx along x 
 
//  sy along y 
 
// ctx the context to draw to 
 
// drawing the function that will draw 
 
function drawAt(ctx,drawing,x,y,sx,sy,angle){ 
 
    if(useMatrix){ // create the transform by hand 
 
     var xdx = Math.cos(angle); // get the direction of x along the page 
 
     var xdy = Math.sin(angle); 
 
     ctx.setTransform(// completely replace existing matrix 
 
      xdx * sx, // set the x direction and scale it by sx 
 
      xdy * sx, 
 
      -xdy * sy, // set the y direction @ 90deg of x and scale it by sy 
 
      xdx * sy, 
 
      x,y  // set the origin at x and y 
 
     ); 
 
    } else { // create the matrix by mutiplying existing matrix with translation, rotation and scale matricies. 
 
     // the order of these are important 
 
     ctx.translate(x,y); // multiply existing matrix with this translation 
 
     ctx.rotate(angle); // multiply the modified matrix with this rotation 
 
     ctx.scale(sx,sy); // multiply the modified matrix with this scale 
 
     
 
    } 
 
    drawing(ctx);  // call draw 
 
    
 
    // restor the transform to default (identity matrix) 
 
    // reset x direction is vector (1,0) from left to right 
 
    //  y     (0,1) from top to bottom 
 
    // origin is 0,0 at the top left of page. 
 
    ctx.setTransform(1,0,0,1,0,0); // reset the transform to top left 
 
} 
 

 

 

 
// the function to draw. It does not need to now about where it is being draw. 
 
function drawHello(ctx){ // say hello 
 
    ctx.font = "20px verdana"; // all drawing is relative to the origin 
 
    ctx.textAlign = "center"; 
 
    ctx.textBaseline = "middle"; 
 
    ctx.fillText("Hello planet Earth!",0,-22); // draw above in the y direct -22 pixels 
 
    ctx.fillText("This is an example to help",0,0); // draw at origin 
 
    ctx.fillText("understand the coordinate system",0,22); // next line is 22 pixels below the top 
 
    ctx.font = "10px verdana"; // change font size 
 
    ctx.fillStyle = "white"; // and colour 
 
    ctx.fillText("Move the mouse over the canvas.",0,44); 
 
} 
 

 

 
// clear screen update animation values, and draw the text and what not. 
 
function update(){ // function to update the canvas 
 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); // clear the canvas 
 
    angle += angleDelta;  // change the angle 
 
    scaleFunction();   // set the scales 
 
    
 
    useMatrix = ! useMatrix; // alternate transformation creation method. 
 
    ctx.fillStyle = "red"; // the red center 
 
    // first draw at the center of the canvas 
 
    drawAt(ctx,drawHello,ctx.canvas.width/2,ctx.canvas.height/2,1,1,0); 
 
    
 
    // now draw rotating ans scaling around the mouse 
 
    ctx.fillStyle = "black"; // black for the mouse 
 
    drawAt(ctx,drawHello,mouse.x,mouse.y,scaleX,scaleY,angle); 
 
    
 
    // set time out for the next update. 
 
    setTimeout(update,50); // refresh twenty times a second. 
 
} 
 

 

 
// only start if there is a canvas context to draw to. 
 
if(ctx !== undefined){ // make sure there is something to draw to 
 
    update(); // start rendering; 
 
}

.sofCanvas { 
 
    width:400px; 
 
    height:250px; 
 
    border: #000 solid; 
 
    background: #A4A4D1; 
 
}

<canvas id="canvasID" class="sofCanvas" width=400 height=250>time to update your browser</canvas>