import "https://cdn.skypack.dev/@next2d/player@latest";

​

const root = next2d.createRootMovieClip(240, 240, 60, {

    "tagId": "container",

    "fullScreen": true

});

​

const image = new Image();

image.crossOrigin = "Anonymous";

​

image.addEventListener("load", (event) => 

{

    const { Shape, Sprite, BitmapData } = next2d.display;

    const { MouseEvent } = next2d.events;

    const bitmapData = new BitmapData();

    bitmapData.image = event.target;

    const sprite = root.addChild(new Sprite());

    const shape = sprite.addChild(new Shape());

    shape

        .graphics

        .beginBitmapFill(bitmapData)

        .drawRect(0, 0, bitmapData.width, bitmapData.height);

    shape.x = -bitmapData.width  / 2;

    shape.y = -bitmapData.height / 2;

    sprite.scaleX = sprite.scaleY = 0.8;

    sprite.x = 120;

    sprite.y = 120;

    const bounds = sprite.getBounds(root);

    const rectShape = root.addChild(new Shape());

    rectShape

        .graphics

        .lineStyle(2)

        .drawRect(bounds.x, bounds.y, bounds.width, bounds.height);

    sprite.buttonMode = true;

    sprite.addEventListener(MouseEvent.CLICK, (event) => 

    {

        const target = event.currentTarget;

        target.rotation += 15;

        const bounds = target.getBounds(root);

        rectShape

            .graphics

            .clear()

            .lineStyle(2)

            .drawRect(bounds.x, bounds.y, bounds.width, bounds.height);

    });

});

​

image.src = "https://next2d-demonstration.herokuapp.com/image/character.svg";