如何在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圖像

回答

相關問題