Javascript 使用EaselJS调整可拖动填充的大小

我有一个项目，我正在使用EaselJS在容器中创建填充（矩形）和文本。我的目标是使这个矩形和文本能够在画布上移动。这项工作已经完成，并且运行良好

我的问题是当我尝试使用onMouseOver处理程序使用

scaleX

和

scaleY

调整矩形大小时。这确实完成了，但矩形只是从其初始点移动到其他位置

我已经读过，我需要使用

regX

和

regY

属性来覆盖它，但是在我的代码上下文中，我就是做不到。我做错了什么

以下是我的Javascript代码：

(function(){
    var stage, myCanvas;
    var update = true;
 
    this.init = function() {
        myCanvas = document.getElementById("stageCanvas");
        stage = new createjs.Stage(myCanvas);
        stage.enableMouseOver();
        stage.mouseEnabled = true;
        stage.mouseMoveOutside = true;
        
        // Reference Shape
        var rectFijo0 = new createjs.Shape();
        rectFijo0.graphics.beginFill("#DCD8D4").rect(140,160,78,35);
        stage.addChild(rectFijo0);
        
        // Shape
        var rectOpt0 = new createjs.Shape();
        rectOpt0.graphics.beginFill("#C51A76").rect(140,160,78,35);
        
        txtOpt0 = new createjs.Text("TEST","bold 20px","#FFF");
        txtOpt0.textAlign ="center";
        txtOpt0.x = 50;
        txtOpt0.y = 50;
        
        // Container
        var containerOpt0= new createjs.Container();
        containerOpt0.mouseEnabled = true;
        //#######
        // Probably here is my problem. I don't understand why if I use regX and regY the rectangle moves the lower right corner to the center, instead of just using this point as a registration point. Why? What I am not understanding?
        //containerOpt0.regX = 78/2;
        //containerOpt0.regY = 35/2;
        //#######
        containerOpt0.onPress = pressHandler;
        containerOpt0.onMouseOver = mouseOverHandler;
        containerOpt0.addChild(rectOpt0, txtOpt0);
        
        stage.addChild(containerOpt0);
        stage.update();
        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener("tick", tick);
    }
    
    function pressHandler(e){
    // onPress Handler to drag
        var offset = {x:e.target.x-e.stageX, y:e.target.y-e.stageY};
        e.onMouseMove = function(ev) {
            e.target.x = ev.stageX+offset.x;
            e.target.y = ev.stageY+offset.y;
            update = true;
        }
    }
    
    function mouseOverHandler(e){
        e.target.scaleX = .5;
        e.target.scaleY = .5;
        update = true;
    }
    
    function tick() {
    if (update) {
            update = false;
            stage.update();
        }
    }

    window.onload = init();
}());

---

这是我的照片，这样你就可以清楚地看到发生了什么。只需将鼠标拖动到矩形上，即可了解我的意思。这一定很容易实现，但我不确定如何实现。

您的问题是，您绘制的矩形不是0 | 0，“标准”方法是从0 | 0开始绘制形状，然后通过

.x

和

.y

rectOpt0.graphics.beginFill("#C51A76").rect(140,160,78,35);
=> changed to
rectOpt0.graphics.beginFill("#C51A76").rect(0,0,78,35);

此外，我还将容器放置在140 | 160+regX/Y偏移：

containerOpt0.regX = 78/2; //regX/Y to have is scale to the center point
containerOpt0.regY = 35/2;
containerOpt0.x = 140 + 78/2;  //placement + regX offset/correction
containerOpt0.y = 160 + 35/2;

---

以下是更新后的提琴：

您的问题是，您绘制的矩形不是0 | 0，“标准”方法是从0 | 0开始绘制形状，然后通过

.x

和

.y

rectOpt0.graphics.beginFill("#C51A76").rect(140,160,78,35);
=> changed to
rectOpt0.graphics.beginFill("#C51A76").rect(0,0,78,35);

此外，我还将容器放置在140 | 160+regX/Y偏移：

containerOpt0.regX = 78/2; //regX/Y to have is scale to the center point
containerOpt0.regY = 35/2;
containerOpt0.x = 140 + 78/2;  //placement + regX offset/correction
containerOpt0.y = 160 + 35/2;

---

这是最新的提琴：

这正是我所需要的，现在我明白我做错了什么。非常感谢；）这正是我需要的，现在我明白我做错了什么。非常感谢；）我理解这是一个古老的问题，但尽管它在体内没有一个完整的概念，但它可能会被终结。你能把代码的本质带进问题本身吗？JS Fiddle链接没有什么问题，但理想情况下，问题也是自包含的。@halfer足够公平了。目前，我更清楚地意识到这一点。我已经在问题中添加了Javascript代码，以澄清StackOverflow中的上下文。太好了，谢谢您的编辑！我理解这是一个古老的问题，但尽管它在体内没有一个完整的概念，但它可能会被终结。你能把代码的本质带进问题本身吗？JS Fiddle链接没有什么问题，但理想情况下，问题也是自包含的。@halfer足够公平了。目前，我更清楚地意识到这一点。我已经在问题中添加了Javascript代码，以澄清StackOverflow中的上下文。太好了，谢谢您的编辑！