processing.js에서 SVG 이미지를 어떻게 회전합니까?

Question

나는 processing.js로 꼼짝 못하고 이미지를 회전시킬 때마다 화면의 위치도 변경되기 때문에 문제가 발생했습니다. 그래서 프로세싱이하는 일은, 이미지를 회전시키지 않고, 이미지를 회전시키지 않고 이미지를 자신의 축을 중심으로 회전시킨 다음, 내가 말한 위치에 배치하는 것입니다 (이 방법으로는 그렇게 할 수 없다고 생각했습니다/주문).

이

코드

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, 너비, 높이) 함수의 좌표를 중심으로 회전합니다. 누구든지 어떤 제안이 있다면, 나는 너무 행복 할거야! 희망이 내 질문에 의미가, 만약 내가 더 이상 그 부분을 명확하게 행복하게 될 것입니다.

감사합니다. :)

Answer 1

모양을 회전하지 않고 좌표계를 회전하는 것이 훨씬 쉽습니다. (0,0)은 도형의 중심 상부에 위치하도록

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

이 먼저 이동은 다음 형태를 그리는 한 다음 전체를 45도 회전 좌표계 좌표계. 그런 다음 평상시처럼 좌표계를 재설정하고 도면을 유지합니다.