0

我有 2 个画布对象，它们都包含平铺图像。我的客户最近要求这两个图像能够同时出现。我只是允许它们同时启用，认为它们会适当地平铺，但事实并非如此。

经过一番仔细思考后，我意识到这是因为它们的宽度不同，所以虽然我的平铺图像宽度为 7 像素，但它可能并不总是以 7 像素结束，因此导致它看起来不能干净地平铺。

我不能只剪掉剩余部分，因为图像被用来评估物品的数量（没有过多的细节），并且在物品 2 旁边有 97 个数量的物品，与第 2 行相比，在一行上有 200 个数量数量为 100 的项目 1 和数量为 300 的项目 2 对最终用户来说会很奇怪。

有谁知道我如何开始将两个画布对象拼接在一起，或者使用 1 个画布对象，然后使用两个背景图像并设置百分比宽度或另一个会影响的东西？

4

2 回答 2

0

您可以使用 BitmapData 类的copyPixels()方法来实现这种结果。为此，您需要使用Loader. 加载图像时，您有两个Bitmap对象。从那里，您可以访问BitmapData每个对应的Bitmap并可以将它们拼接在一起。

拼接后，您Bitmap从组合的BitmapData. 然后你将组合Bitmap提供给其他一些组件。不幸的是， aCanvas不会接受 aBitmap的backgroundImage风格。但是您可以将组合添加Bitmap到 aUIComponent或将其设置为source组件的Image。

最后，将UIComponent或添加Image到Canvas. 由于您可以Canvas在Canvas.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical"
                minWidth="955" minHeight="600"
                creationComplete="onCreationComplete()">
    <mx:Script>
        <![CDATA[
            import mx.containers.Canvas;
            import mx.controls.Image;
            import mx.core.UIComponent;
            import mx.events.FlexEvent;

            private var loader1:Loader;
            private var loader2:Loader;
            private var bitmap1:BitmapData;
            private var bitmap2:BitmapData;

            protected function onCreationComplete():void
            {
                loader1 = new Loader();
                loader1.load(new URLRequest("Android_Robot_100.png"));
                loader1.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoader1Complete, false,0,true);
                loader2 = new Loader();
                loader2.load(new URLRequest("rails.png"));
                loader2.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoader2Complete, false,0,true);
            }

            protected function onLoader1Complete(event:Event):void
            {
                bitmap1 = (loader1.content as Bitmap).bitmapData;
                if (bitmap1 && bitmap2)
                    copyPixels();
            }

            private function onLoader2Complete(event:Event):void
            {
                bitmap2 = (loader2.content as Bitmap).bitmapData;
                if (bitmap1 && bitmap2)
                    copyPixels();
            }

            protected function copyPixels():void
            {
                // false = non-transparent background
                var combined:BitmapData = new BitmapData(200,200, false);
                var sourceRect1:Rectangle = new Rectangle(0,0,bitmap1.width, bitmap1.height);
                var sourceRect2:Rectangle = new Rectangle(0,0,bitmap2.width, bitmap2.height);
                combined.copyPixels(bitmap1, sourceRect1, new Point(0,0));
                combined.copyPixels(bitmap2, sourceRect2, new Point(bitmap1.width, 0));
                var result:Bitmap = new Bitmap(combined);
                var image:Image = new Image();
                image.source = result;
                var canvas:Canvas = new Canvas();
                canvas.addChildAt(image, 0);
                addChild(canvas);
                // as an alternative, just add the bitmap to a UIComponent
                // note you can't do this and the above at the same time,
                // becuase the 'result` Bitmap can only be the child of one
                // object, adding it to one thing removes it from the other...
//              var uic:UIComponent = new UIComponent();
//              uic.addChild(result);
//              addChild(uic);
            }
        ]]>
    </mx:Script>
</mx:Application>
于 2013-06-12T16:30:22.057 回答
0

最终我把它复杂化了。我只是用屏蔽来做到这一点......

<mx:Canvas width="100%" height="100%">
    <mx:Image id="myFirstUnrelatedImage" width="50%" height="65%" maintainAspectRatio="false"
              verticalCenter="0" left="3"
              source="@Embed('../assets/image1.png')" visible="true"/>

    <!-- not sure why borderStyle here is required but it won't show up without? -->
    <mx:Canvas id="image1mask" width="30%" height="94%" 
               borderStyle="none" visible="false"/> 
    <mx:Canvas id="image1" width="100%" height="100%"
               minWidth="0" styleName="myStyle"
               mask="{image1mask}"/>

    <!-- not sure why borderStyle here is required but it won't show up without? -->
    <mx:Canvas id="image2mask" width="20%" height="94%"
               right="0" borderStyle="none" visible="false"
               includeInLayout="false"/> 
    <mx:Canvas id="image2" width="100%" height="100%"
               minWidth="0" styleName="myStyle2"
               mask="{image2mask}"/>
</mx:Canvas>

我的样式在 css 中控制 backgroundImage 和 backgroundRepeat 属性。

于 2013-06-14T04:42:19.327 回答