x와 y는 Transform()을 설정 한 후에 추가 값을 얻습니다.

Question

svg 자유 변환 작업을하고 있습니다. 객체가 페이지 초기화 후 스케일 값을 가진 자체 변환 속성을 갖는 경우를 제외하고는 모두 잘 작동합니다. 이 같은

뭔가 : 여기

<g transform="matrix(1.5,0,0,1.5,70,70)"></g> 

내가 오브젝트가 초기 스케일 값이없는 경우이 객체에게

var newTransform = 't' + (this.data('xy').x) + ',' + (this.data('xy').y); 
       newTransform += 'r' + (this.data('r')) 
       newTransform += 's' + (this.data('s')) 

this.transform(newTransform); 

을 끌어 크기 조정을 할 것입니다,이 제외로 잘 작동합니다. 객체를 완벽하게 드래그하고 크기를 조절할 수 있습니다.

하지만 처음에 개체의 크기가 1보다 작 으면, 첫 번째 transform()을 설정할 때 개체의 크기가 다시 조정됩니다. 추가 x, y 및 크기가 추가됩니다. 대신 행렬을 사용하면 문제를 해결할 수 있습니다. 그러나 객체는 중심에서 확장되지 않습니다.

행렬로 변환 :

var t = new Snap.Matrix() 
    t.add(this.data('s'),0,0,this.data('s'),this.data('xy').x,this.data('xy').y); 
    this.transform(t); 

내가 잘못에 스냅 SVG 문자열로 변환 뭔가를하고 있습니까? 첫 번째 변환 (str)에서 두 번 스케일을 방지하려면 어떻게합니까?

Answer 1

매우 복잡 할 수 있습니다. 통합 할 수있는 가장 간단한 방법은 요소를 g/group 요소 내부로 드래그하여 배치하는 것입니다. 그런 다음 해당 외부 g/group 요소에 드래그를 놓습니다.

내부 요소의 기존 변형을 그대로 유지하고 지저분하지 않습니다. 그래서 당신이 svg에 여분의 그룹 요소를 포함 할 수 있다면, 나는이 길로 갈 것입니다.

이유가 무엇이든간에 할 수 없다면. 나는 장기간 (특히 당신이 역동적 인 회전 등을 포함한 freetransform을 할 것이라면), 나는 당신이 훨씬 더 복잡하게 될 필요가 있다고 생각한다. 나는 아마도 내가 사용할 수있는 시작 경로를 포함하고 있는데, 이것은 또한 추가 된 복잡성을 가져 오기 때문에 스케일 된 뷰 박스/스크린에도 대응할 수있을 것이다.

그래서 아마도 새로운 방법 몇 가지를 소개 할 ...

getCursorPoint은 (요소와 반대) 화면에 어떤 변환를 차지, 마우스의 실제 지점을 가져옵니다. 아직 구체적인 예를 들어 보지 못했지만 나중에 종이를 확대하거나 축소하여이 문제에 부딪 힐 수 있습니다.

getTransformedDrag는 드래그 할 때의 화면 변형을 설명합니다.

Element.prototype.getCursorPoint = function(x, y) { 
    var pt = this.paper.node.createSVGPoint();  
    pt.x = x; pt.y = y; 
    return pt.matrixTransform(this.paper.node.getScreenCTM().inverse()); 
} 

Element.prototype.getTransformedDrag = function(otx, oty, x, y) { 
    var xy = this.getCursorPoint(x, y); 
    var tdx = {}; 
    var snapInvMatrix = this.data('origTransform').invert(); 

    snapInvMatrix.e = snapInvMatrix.f = 0; 

    tdx.x = snapInvMatrix.x(xy.x - otx, xy.y - oty); 
    tdx.y = snapInvMatrix.y(xy.x - otx, xy.y - oty); 
    return tdx; 
} 

이제 우리는 길 밖으로 드래그 주위 배경 보풀의 비트를 가지고, 우리는 .... 드래그 몇 가지 요소에

스토어의 가능성이있는, 화면 전환, 커서 위치와를들을 연결할 수 있습니다 요소의 초기 행렬

var dragStart = function(x, y, ev) { 
    this.data('origTransform', this.transform().localMatrix) 
    var txy = this.getCursorPoint(x,y) 
    this.data('oxy', {x: txy.x, y: txy.y }); 
} 

var dragMove = function(dx, dy, x, y, ev) { 
    var tdr = this.getTransformedDrag(this.data('oxy').x, this.data('oxy').y, x, y) 
    this.data('xy', { 
      x: tdr.x, 
      y: tdr.y 
     }) 
    .updateTransform(); 
} 

Element.prototype.updateTransform = function() { 
    var newTransform = 't' + (this.data('xy').x) + ',' + (this.data('xy').y); 
    //newTransform += 'r' + (this.data('r')) 
    //newTransform += 's' + (this.data('s')) 
    this.transform(this.data('origTransform').toTransformString() + newTransform) 

    return this; 
} 

언급 한 바와 같이

Example jsfiddle

이 지나치게 복잡한 보일지도 모르지만, 난 그냥 매우 복잡한 지역이다 당신이 나중에 유용하게 사용할 수있는 몇 가지 추가 코드를 포함하기 위해 노력하고있어. 따라서 필요할 때 참조로 사용하십시오.