如何解决为什么Flex的矩阵将捕捉的孩子转换回父级的上角?
| 我在Flex中遇到矩阵变换问题。 我有一个Flex Canvas,里面只有一个图像,就像这样。<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()时,会发生相同的情况。因此,以下代码还将图像在移动后重新捕捉到画布的0,0:
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;
}
杰克
解决方法
这是我固定的方法。我在我的Image类中覆盖了名为'super.move()'的\'move \'函数,然后将转换矩阵重置为最初设置的值(在本例中为_affineTransform)。
override public function move(x:Number,y:Number):void
{
super.move(x,y);
this.transform.matrix = _affineTransform;
}
哈克,但请注意...如果有人有更清洁的解决方案,请告诉我!
,如果您在mx.core.UIComponent
中查找set x()
替代的源代码,则会看到以下行:
_layoutFeatures.layoutX = value
基本上,它将忽略默认显示列表“ 7”值,并将位置存储在其他位置。一旦处理完完整版式(替换您的翻译价值),实际的x
可能会在以后设置。您可能应该始终使用x
,y
,scaleX
,scaleY
,rotation
和任何其他相关属性。似乎Adobe并不打算让Flex支持常规的显示对象转换矩阵。
,我认为您可能必须将x,y值添加到翻译中:
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;
}
,尝试设置这个。
matrix.tx
matrix.ty
,解决方案/解决方法很简单。代替这个:
<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坐标现在应该位于它们的位置,也就是您将画布拖动到的位置。
希望这对某人有帮助,并节省了我在此上浪费的时间。
杰克
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。