왜 Flex의 행렬 변형 스냅 자식입니까? 부모의 맨 위로 코너?

Question

Flex에서 Matrix Transform에 문제가 있습니다.

나는 그 안에 이미지 만있는 플렉스 캔버스를 가지고 있습니다. I 줌/회전을 적용하고이 이미지에

<mx:Canvas> 
<mx:Image id="img" source="/some/Url" /> 
</mx:Canvas> 

다음과 같은 코드를 사용하여 변환 :

private function _rotateAndZoomImage(zoom:Number, angle:Number):void{ 
var radians:Number = angle * (Math.PI/180.0); 
var offsetWidth:Number = (img.contentWidth/2.0); 
var offsetHeight:Number = ( img.contentHeight/2.0); 
var matrix:Matrix = new Matrix(); 

matrix.translate(-offsetWidth, -offsetHeight); 
matrix.rotate(radians); 
//Do the zoom 
matrix.scale (zoom/100, zoom/100); 
matrix.translate(+offsetWidth, +offsetHeight); 
img.transform.matrix = matrix; 
} 

이 모든 일을. 그러나. 이미지는 드래그 가능합니다. 사용자는 부모 인 캔버스 내부 어디에서나 이동할 수 있습니다.

일단 화상 이동 변환 된 이미지는 변환되기 전에 원래 0,0 (상단 캔버스 왼쪽) 위치로 다시를 "스냅"가져오고 나중이 남아 인가 -하지 사용자는 그것을 기대할 수 있습니다.

하루의 가장 좋은 시간을 보내고 난 후 나는 아직도 지구에서 왜 이런 일을하는지 알 수 없습니다. 아무도?

편집 : 위의 코드에서 .translate()를 두 번 호출하지 않고 동일한 문제가 발생합니다.

private function _rotateAndZoomImage(zoom:Number, angle:Number):void{ 
var radians:Number = angle * (Math.PI/180.0); 

var matrix:Matrix = new Matrix(); 
matrix.rotate(radians); 
matrix.scale (zoom/100, zoom/100); 
img.transform.matrix = matrix; 
} 

제이크

Answer 1

이 해결책/해결 방법은 매우 간단합니다.대신이의 :

<mx:Canvas> 
<mx:Image id="img" source="/some/Url" mouseDown="img.startDrag()" /> 
</mx:Canvas> 

지금이 없다 :

는

<mx:Canvas> 
<mx:Canvas id="inner" mouseDown="inner.startDrag()" clipContent="false"> 
    <mx:Image id="img" source="/some/Url" /> 
</mx:Canvas> 
</mx:Canvas> 

드래그 이미지는 더 이상 주 캔버스 내에서 직접 살고있다. 대신 아이 캔버스 안에 살고 있습니다. 이미지는 더 이상 드래그 할 수 없습니다. 드래그 된 내부 캔버스입니다.

이제 이미지에 변형이 적용될 때 캔버스를 드래그 한 곳이므로 좌표는 부모의 0,0 좌표로 유지됩니다.

희망이 누군가에게 도움이되고 내가 이것에 낭비 한 시간을 절약 할 수 있습니다. 제이크

Answer 2

을 당신이 번역에 대한 X, Y 값을 추가 할 수 있습니다 생각 :이 이동 된 후 그래서 다음 코드는 캔버스의 0,0로 다시 이미지를 스냅 :

private function _rotateAndZoomImage(zoom:Number, angle:Number):void{ 
var radians:Number = angle * (Math.PI/180.0); 
var offsetWidth:Number = (img.contentWidth/2.0); 
var offsetHeight:Number = ( img.contentHeight/2.0); 
var matrix:Matrix = new Matrix(); 

matrix.translate(-offsetWidth, -offsetHeight); 
matrix.rotate(radians); 
//Do the zoom 
matrix.scale (zoom/100, zoom/100); 
matrix.translate(img.x + offsetWidth, img.y + offsetHeight); 
img.transform.matrix = matrix; 
} 

Answer 3

이 설정을 시도해보십시오.

matrix.tx 
matrix.ty 

Answer 4

다음은 어떻게 수정 했습니까? super.move()라는 Image 클래스에서 'move'함수를 재정의 한 다음 변환 행렬을 원래 설정 한 값 (이 경우 _affineTransform)으로 재설정합니다.

override public function move(x:Number, y:Number):void 
    { 
     super.move(x,y); 
     this.transform.matrix = _affineTransform; 
    } 

해키지만, 할 일이있어 ... 누군가가 더 깨끗한 해결책을 가지고 있다면 알려 주시기 바랍니다!

_layoutFeatures.layoutX = value 

는 기본적으로, 기본 표시 목록 x 값 저장 다른 위치를 무시 : 당신이 mx.core.UIComponent에 set x() 재정에 대한 소스 코드를 보면

Answer 5

, 당신은 다음과 같은 라인을 볼 수 있습니다. 실제 x은 나중에 전체 레이아웃이 처리 된 후 (번역 값 대체) 나중에 설정됩니다. 항상 x, y, scaleX, scaleY, rotation 및 기타 관련 속성을 항상 사용해야합니다. Adobe는 Flex가 일반 표시 객체 변환 행렬을 지원하지 않을 것으로 생각합니다.