0

タイル イメージを含む 2 つのキャンバス オブジェクトがあります。私のクライアントは最近、両方の画像を同時に表示できるようにするように要求しました。私は、それらが適切にタイル化されると考えて、両方を同時に有効にできるようにしましたが、そうではありません。

慎重に考えた後、これは幅がさまざまであるためであることに気付きました。タイリング イメージの幅は 7 ピクセルですが、常に 7 ピクセルで終わるとは限らないため、タイルがきれいに表示されません。

画像はアイテムの数量を評価するために使用されており (あまり詳細には触れずに)、1 つの行に 200 の数量のアイテム 2 の隣に 97 の数量のアイテム 1 があり、行 2 には数量が 100 のアイテム 1 と数量が 300 のアイテム 2 は、エンドユーザーには奇妙に見えます。

2つのキャンバスオブジェクトを一緒にスプライスするか、1つのキャンバスオブジェクトを使用してから両方の背景画像を使用し、percentWidthまたは他のものが影響する何かを設定する方法を知っている人はいますか?

4

2 に答える 2

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 に答える
0

BitmapData クラスのcopyPixels()メソッドを使用して、この種の結果を得ることができます。これを行うには、各画像をLoader. 画像が読み込まれると、2 つのBitmapオブジェクトができます。そこから、対応するBitmapDatafor eachにアクセスし、Bitmapそれらをつなぎ合わせることができます。

スプライスの後、結合された から新しいBitmapオブジェクトを作成しますBitmapData。次に、結合Bitmapしたものを他のコンポーネントにフィードします。残念ながら、 aはそのスタイルでCanvasa を受け入れません。ただし、組み合わせた を に追加したり、コンポーネントのとして設定したりできます。BitmapbackgroundImageBitmapUIComponentsourceImage

UIComponent最後に、またはImageをに追加しますCanvas。に物を重ねることができるのでCanvas、組み合わせた画像を のインデックス 0 に配置 (およびそのままにしておく) 限り、効果的に背景画像を作成できます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 に答える