如何在processing.js中旋转SVG图像

我只是盯着processing.js，我一直有困难，因为每次我旋转图像时，它也会改变它在屏幕上的位置。所以，处理似乎做的是，将我的图像旋转到我说的放置它的位置，而不是先旋转它自己的轴，然后将它放在我告诉它的位置（我认为不能这样做/订购）。如何在processing.js中旋转SVG图像

这是代码

PShape s; 
float angle = 0.1; //rads 
s = loadShape("sensor.svg"); 
s.rotate(angle); 
//I change this angle manually or with my clickMouse function which isnt shown. 

void setup(){ 
    size(400,350); 
frameRate(30); //30 frames per seconds 
} 

void draw(){ //shape(shape, x, y, width, height); 
    smooth(); 
    fill(153); 
    ellipse(200, 350/2, 100, 100); 
    shape(s, 200, 350/2, 20, 20); 
    ellipse(200, 350/2, 2, 2); 
}

什么我基本上是试图做的是使围绕着我画的圆圈（椭圆）的正确方向这一“传感器”图像旋转。那是这个想法。它既不做也不做。也许有一个点击功能可以在圆周上旋转SVG图像。但相反，它会围绕形状的坐标（图像，x_coord，y_coord，宽度，高度）函数进行旋转。如果有人有任何建议，我会很高兴！希望我的问题是有道理的，如果它不是我乐意澄清它的任何部分。

谢谢！ :)

来源

2012-07-06 Charlie Parker

不旋转你的形状，而是旋转坐标系更容易。

void draw() { 
    translate(s.width/2,s.height/2); 
    rotate(PI/4); 
    shape(s); 
    resetMatrix(); 
    // keep on drawing here 
}

该第一移动的坐标系，使（0,0）是在你的形状的中心的顶端，然后旋转45度的整个坐标系中，然后吸引你的形状。然后你重新设置坐标系并像往常一样继续绘制。

来源

2012-07-07 15:14:20

如何在processing.js中旋转SVG图像

回答

相关问题