javascript - EaselJS を使用したマウス イベントでキャンバス要素のサイズを変更する

Question

要素をキャンバスに描画し、ユーザーがクリックしてドラッグしてサイズを変更できるようにしようとしています。私はこれを Kinetic JS ライブラリで実装しましたが、私の開発チームは Easel JS に移行しています。

Kinetic ライブラリを使用したコードを次に示します。

これは十分に機能します。

Easel JS でここまでやってみましたが、このコードは何もしません。キャンバスは完全に空白です。次の方法がわからないことに気付きました。

• マウス イベントを呼び出します。ここでは、このチュートリアルのように、それらを DOM 要素にアタッチしようとしています。
• リサイズ機能をどこに設定するか -- 別の機能? tick() 関数内で呼び出されますか?
• マウス座標をつかむ

    var canvas;
var stage;
var rect;

var mousePos = new Point(); 
var update = true;

var rectX = 10;
var rectY = 10;
var rectW = 100;
var rectH = 50;
var rectXOffset = 50;
var rectYOffset = 50;

var newWidth;
var newHeight;

function init() {
    // create stage and point it to the canvas:
    canvas = document.getElementById("testCanvas");
    stage = new Stage(canvas);

    // overlay canvas used to draw target and line
    canvasWrapper = $("#testCanvas");

    // listen for a mouse down event
    canvasWrapper.mousedown(onMouseDown);

    // listen for mouse up event
    canvasWrapper.mouseup(onMouseUp);

    // enable touch interactions if supported on the current device:
    if (Touch.isSupported()) { Touch.enable(stage); }

    // enabled mouse over / out events
    stage.enableMouseOver(10);

    // start drawing instructions
    var rect = new Shape();
    rect.graphics
        .setStrokeStyle(1)
        .beginStroke(Graphics.getRGB(25,25,112,.7))
        .drawRect(rectX,rectY,rectW,rectH);

    // add rectangle to stage
    stage.addChild(rect);

    // render stage
    stage.update();

    // set the tick interval to 24 fps
    Tick.setInterval(1000/24);

    // listen for tick event
    Tick.addListener(window, true);

    // pause
    Tick.setPaused(false);

}

//called when user clicks on canvas
function onMouseDown(e) {

    mousePos.x = e.stageX;
    mousePos.y = e.stageY

    // check to see if mouse is within offset of rectangle
    if(mousePos.x <= (rectW + rectXOffset) || mousePos.y <= (rectH + rectYOffset)) {
        // set update to true
        update = true;

        // unpause tick
        Tick.setPaused(false);

    }

}

function onMouseUp(e) {
    update = false;
    Tick.setPaused(true);
}

function tick() {
    // this set makes it so the stage only re-renders when an event handler indicates a change has happened.
    if (update) {
       if(mousePos.x - rectX < 50) 
       {
        newWidth = 50;
       } else {
        newWidth = mousePos.x - rectX;
       }
       if(mousePos.y - rectY < 50) 
       {
        newHeight = 50;
       } else {
        newHeight = mousePos.y -rectY;
       }
        rectW = newWidth;
        rectH = newHeight;

        rect.clear();

        rect.graphics
        .setStrokeStyle(1)
        .beginStroke(Graphics.getRGB(65,65,65,.7))
        .drawRect(0,0,rectW,rectH);

        // add rectangle to stage
        stage.addChild(rect);

        update = false; // only update once
        stage.update();
    }
}

それほど難しいことではないことを私は知っており、助けていただければ幸いです。