변환이 요소를 업데이트하지 않음

var m = ele.matrix;

m.translate(10,10) //이 줄은 행렬의 'e'와 'f'를 업데이트합니다. 그것도 내가 파이어 버그의 값을 새로 고친 경우에만 업데이트 된 값을 볼 수 있습니다변환이 요소를 업데이트하지 않음

요소가 번역되지 않습니다. 엘리먼트의 행렬을 변경할 때 엘리먼트가 변환을 따르는 방법을 알려주십시오.

전체 코드 :

<html> 
<head> 
    <script src="raphael-min.js"></script> 
    <style> 
     #canvas_container { 
       width: 500px; 
       border: 1px solid #aaa; 
      } 
    </style> 
</head> 
<body><div id="canvas_container"></div></body> 
<script> 
window.onload = function() {  
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);  
    text = paper.text(150,150,"Some Text");  
    text.transform("m1,0,0,1,5,0") 
} 
</script> 
</html>

감사

출처

2011-12-14 rajkamal

일부 * MORE * 샘플 코드? –

내가 변환이 작동 생각하지만, 당신이 이동 볼 수 없어요, 그래서 그것을 즉시 실행됩니다. 그것을보고 타임 아웃 후 변화 시도 :

setTimeout(function() {text.transform("m1,0,0,1,5,0")}, 2000);

편집 : 좋아, 나는이 좀 더 쳐다 보면서 도움이 될 몇 가지를 발견했다. 이 fiddle에서 따라 할 수 있습니다.

요소의 matrix 속성을 사용하는 것은 실제로 문서화되지 않았습니다. (내부적으로 사용되었지만 실제로 Raphael 사용자가 사용하지 않는 것 같기 때문에 Matrix가 왜 문서화되어 있는지 궁금합니다.) 요소에 적용하기 위해 알아낼 수있는 유일한 방법은 행렬의 변환 문자열을 가져와 element.transform()을 사용하여 적용하는 것입니다. 문제 중 하나는 Matrix.toTransformString()은 x 또는 y 번역이 0이면 번역이 완전히 손실된다는 것입니다 (방금 드미트리에게보고 함). {isSimple: false}을 전달하여 행렬 문자열을 반환 할 수있었습니다.

그러나이 방법을 사용하면 모든 회전 및 크기 조정이 원점에 상대적으로 보이는 데는 다소 번거롭기 만합니다. (내가 아닌 행렬 변환에 더 정통하지 않으면 단단한). 어쨌든, 바이올린은 여러 요소의 변형 조합을 실행합니다. 다소 엉성함이 있지만 행렬 변환을 수행하는 방법에 대한 아이디어를 줄 수 있다고 생각합니다 (또는 직접 변환, 크기 조절 및 회전과 같은 요소 변환 함수를 사용하는 것이 더 낫다면).

출처

2011-12-14 16:29:19

변환 방법이 작동 중입니다. 그러나 elematrix.translate (dx, dy)와 같은 행렬을 조작하면 변환이 요소에 적용되지 않습니다. ele.update()와 같은 다른 메서드를 호출해야합니까? – rajkamal

변환이 요소를 업데이트하지 않음

답변

관련 문제