Question

我是flash，actionscript和class / method / static / instance范例的新手。我有一个我使用的类，它加载一个png文件并将其添加到舞台上，然后我可以用鼠标操作它。我想要做的是在png文件的顶部添加一些文本。当用户点击并拖动png文件时，我希望文本坚持使用它，基本上使它成为png的一部分，覆盖它，组合它们，将它们分组，等等。

这是我用来加载png的类。

package {

import flash.display.MovieClip;
import flash.display.Loader;
import flash.events.*;
import flash.net.URLRequest;

public class element_icon extends MovieClip {
    public function element_icon(type) {
        var imageLoader:Loader = new Loader();
        var theURL:String = "images/" + type + ".png";
        var imageRequest = new URLRequest(theURL);
        imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
        imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
        imageLoader.load(imageRequest);



        function onIOError(e:IOErrorEvent):void{
            var theURL:String = "images/default.png";
            var imageRequest = new URLRequest(theURL);
            imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
            imageLoader.load(imageRequest);
        }

        function onComplete(evt:Event) {
            addChild(imageLoader.content);

        }
    }
}
}

Answer 1

我的答案与Nathan Ostgard基本相同，但我的答案是完成的课程如下（我重写了很多课程以遵守常见的编码惯例以及提高整体可读性）：

package 
{
    import flash.display.Bitmap;
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.events.IOErrorEvent;
    import flash.events.Event;
    import flash.net.URLRequest;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.events.MouseEvent;

    public class ElementIcon extends MovieClip 
    {
        private var _bitmap:Bitmap;
        private var _name:String;
        private var _textField:TextField;

        private const DEFAULT_URL:String = "images/default.png";

        public function ElementIcon(name:String) 
        {
            _name = name;

            init();

        }// end function

        private function init():void
        {
            _textField = new TextField();

            loadImage();

            addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
            addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

        }// end function

        private function loadImage():void
        {
            var url:String = "images/" + _name + ".png";
            var loader:Loader = new Loader();
            loader.load(new URLRequest(url));
            loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onLoaderIOError);
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);

        }// end function

        private function onLoaderIOError(e:IOErrorEvent):void
        {
            var loader:Loader = new Loader();
            loader.load(new URLRequest(DEFAULT_URL));
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);

        }// end function

        private function onLoaderComplete(e:Event):void
        {
            _bitmap = e.target.content as Bitmap;

            build();

        }// end function

        private function build():void
        {
            addChild(_bitmap);

            _textField.text = _name;
            _textField.x = (this.width/2) - (_textField.textWidth/2)
            _textField.y = 5;
            _textField.selectable = false;
            addChild(_textField);

        }// end function

        private function onMouseDown(e:MouseEvent):void
        {
            startDrag();

        }// end function

        private function onMouseUp(e:MouseEvent):void
        {
            stopDrag();

        }// end function

    }// end class

}// end package

您可以实现如下：

var elementIcon:ElementIcon = new ElementIcon("Image1");
addChild(elementIcon);

<强> [UDPDATE]

以下是正在运行的应用程序的屏幕截图（抱歉，我无法制作一个gif文件，因此您可以看到拖动ElementIcon对象，但我向您保证可以拖动它：）

TextOnLoadedImage

Answer 2

您应该创建一个Sprite并将文本和位图添加到：

function onComplete(evt:Event) {
  var text:TextField = new TextField;
  text.autoSize = TextFieldAutoSize.LEFT;
  text.text = 'Hello, world!';

  var sprite:Sprite = new Sprite;
  sprite.addChild(imageLoader.content);
  sprite.addChild(text);

  addChild(sprite);
}

如果您想将文本渲染到位图中，您也可以这样做：

function onComplete(evt:Event):void {
  var text:TextField = new TextField;
  text.autoSize = TextFieldAutoSize.LEFT;
  text.text = 'Hello, world!';

  var bitmap:Bitmap = imageLoader.content as Bitmap;
  bitmap.bitmapData.draw(text);
  addChild(bitmap);
}

如何将文本叠加到movieclip对象上？

2 个答案: