問題描述
表面上的 Playbook AIR SDK 圖像 (Playbook AIR SDK images on surface)
I am trying to write a Playbook app using the AIR SDK, I need a surface of some kind that I can load a large image onto, then subsequently place some smaller images on top of and add the whole lot to a ScrollPane so I can pan it around the screen.
I have tried by adding the image to a sprite and displaying that in a group in the application but the image does not show up.
What is the correct surface kind I should be using here and how should I be loading the images? (currently using "Embed" and loading the image into a BitmapAsset.)
Thanks
EDIT:
var scroll:ScrollPane = new ScrollPane();
scroll.setScrollContent(image);
scroll.update();
scroll.graphics.beginBitmapFill(icon.bitmapData);
scroll.graphics.drawRect(100,100,56,56);
scroll.graphics.endFill();
scroll.update();
This code causes a non‑moving icon to be drawn behind the scrollContent, I want to add something on top of the scroll content that moves with it.
‑‑‑‑‑
參考解法
方法 1:
Rather than adding your images via the graphics api, you need to be adding components as I mentioned in the comment. Now that I know you're trying to use the QNX component set, the situation is a little different.
What you need to do is stick with the QNX components if at all possible otherwise they may not get updated in the display list properly (like things being drawn in the background like you're experiencing)
For the images you should be using something like this :
var newImg : qnx.ui.display.Image = new qnx.ui.display.Image();
newImage.setImage( youImgObj );
For adding containers like you mentioned, you should be using (or similar) :
qnx.ui.core.Container
Then you should find things are drawn in a predictable order (last obj added is on top of stage).
方法 2:
Make your own custom component (you can put it on a ScrollPane later) and draw the images yourself ‑
MyComp.mxml:
<?xml version="1.0" encoding="utf‑8"?>
<s:ViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.MyCompHomeView">
</s:ViewNavigatorApplication>
views\MyCompHomeView.mxml:
<?xml version="1.0" encoding="utf‑8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*" title="HomeView">
<comps:MyRect width="100%" height="100%"/>
</s:View>
comps\MyRect.mxml (draws a red rectangle with shadow underneath):
<?xml version="1.0" encoding="utf‑8"?>
<mx:UIComponent xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
<fx:Script>
<![CDATA[
import flash.filters.*;
public static const SHADOW:Array = [
new DropShadowFilter(10, 80, 0x000000,
0.5, 32, 32, 1, 1, false, false, false) ];
public static const GLOW:Array = [
new GlowFilter(0xFFFF00, 0.5,
36, 36, 1, 1, false, false) ];
private var rect:Shape = new Shape();
override protected function createChildren():void {
super.createChildren();
rect.graphics.beginFill(0xFF0000);
rect.graphics.drawRect(0, 0, 20, 20);
rect.filters = SHADOW;
addChild(rect);
}
override protected function updateDisplayList(
unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(
unscaledWidth, unscaledHeight);
rect.x = unscaledWidth / 2;
rect.y = unscaledHeight / 2;
}
]]>
</fx:Script>
</mx:UIComponent>
(by Hamid、Nate、Alexander Farber)