Away3D in Flex 4 – Phase 2 – Positioning components

最新推荐文章于 2023-10-17 19:39:34 发布

原创最新推荐文章于 2023-10-17 19:39:34 发布 · 755 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#components #flex #object #application #library #each

Flex 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用Away3D与Flex4容器类进行交互的测试案例。该测试中，通过将Panel转换为Canvas容器，实现了Flex组件间的重叠，并通过鼠标悬停事件使3D立方体跳转到文本组件的中间位置。

Phase 2

First working test of Away3D within Flex 4 container class, interacting with other containers. The main significant change is simple - convert from Panel to Canvas container. Canvas allows Flex component to overlap each other.

Code:

The new Away3DCube.mxml file. Once it's running, pass your mouse over each of the text components, and watch the cube jump to the middle of each line:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:local="com.st.mediator.*" minWidth="955" minHeight="600">

	<fx:Script>
		<![CDATA[
			protected function move3DHnd(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				var obj:* = event.target.parent;
				var opt:Point = new Point(obj.x + (obj.width * .5), obj.y + (obj.height * .5));
				
				trace(event.target.parent.name + ": " + opt);
				
				object3DScene.x = opt.x - (object3DScene.width * .5);
				object3DScene.y = opt.y - (object3DScene.height * .5);
			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:BorderContainer width="100%" height="100%" backgroundColor="#D1F0FF">
		<mx:Text id="textTest1" x="175" y="175" text="This is a sample component underlay" mouseOver="move3DHnd(event)" />
		<local:Away3DCube id="object3DScene" width="50%" height="50%" x="100" y="100" />
		<mx:Text id="textTest2" text="This is a sample component overlay." x="200" y="200" mouseOver="move3DHnd(event)" />
	</s:BorderContainer>
</s:Application>