Question

我在canvas元素上工作，并且我在旋转画布元素处停留。

使用我的项目用户单击画布上的任何位置并通过fillText生成文本

到目前为止它还可以。但是当用户尝试基本旋转它时它失败了，因为我坚持翻译和特定坐标的翻译问题。我在互联网上研究所有的例子都使用画布中心。我不能使用它，因为我的画布大小2406 * 2406和生成的文本必须在用户点击的坐标下维护。

我希望我描述得很好，因为英语不是我的主要语言。感谢您的未来帮助..

Answer 1

想象一下画布是页面上的一张网格纸。该网格纸称为变换矩阵。左上角是原点（x：0，y：0），x向右，y向下到页面。您绘制的所有内容都与该点及其x和y相关。因此，200,200处的绘图文本右边200像素，距原点200左右（左上角）。

如果您使用翻译，旋转，缩放，设置变换或变换，则可以在页面上移动网格纸张。比方说翻译200,200。您已将原点向右移动200像素，向下移动200像素。现在，如果您在200,200处绘制文本，它仍然相对于网格纸的原点，现在不在左上角。您的文字最后距离左上角400 x 400像素。如果您想在翻译之前的同一位置绘制文本，则必须更改为坐标以考虑翻译。

旋转会改变网格的方向。顺时针旋转Math.PI / 2（90度）会导致页面侧面的网格。沿x方向移动不再是从左到右，而是从上到下。

规模扩大了合同的网格纸。大于1的比例会增加每个网格的大小，小于1的比例会减小每个网格的大小。

使用平移，缩放和旋转的组合，您可以将网格纸定位在页面的任何位置。当您绘制文本或任何内容时，您总是将其绘制为与网格对齐。

举例说明如何绘制缩放的旋转翻译文本。请花点时间了解发生了什么。如果您有任何疑问，请仔细阅读。（手指交叉，因为我希望这可行，因为这是我第一次尝试使用stackoverflow代码片段的东西）

// 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>

旋转和翻译画布元素特定位置

1 个答案: