带有 HTML 按钮的 CreateJS答案

【问题标题】：CreateJS with HTML button带有 HTML 按钮的 CreateJS
【发布时间】：2018-09-21 21:35:05
【问题描述】：

所以我无法使用外部按钮在画布上单击时绘制形状。它只是行不通。我究竟做错了什么？我尝试使用 jQuery 函数和原生 HTML5，但无济于事。

代码：

JS:

    $(function(){
            $('button').click(function(){
               testButton();
            })
        })      

var stage, output;

        function init() {
            stage = new createjs.Stage("demoCanvas");

            // For mobile devices.
            createjs.Touch.enable(stage);

            // this lets our drag continue to track the mouse even when it leaves the canvas:
            // play with commenting this out to see the difference.
            stage.mouseMoveOutside = true; 

            var circle = new createjs.Shape();
      var square = new createjs.Shape();
      var rec = new createjs.Shape();
            circle.graphics.beginFill("red").drawCircle(0, 0, 50);
square.graphics.beginFill("blue").drawRect(0, 0, 50, 50);
rec.graphics.beginFill("green").drawRect(0, 0, 100, 50);

      function testButton(){
        var testsquare = new createjs.Shape();      
   testsquare.graphics.beginFill("yellow").drawRect(0, 0, 50, 50);

        var draggert = new createjs.Container();
      draggert.x = draggert.y = 100;
      draggert.addChild(testsquare);
      stage.addChild(draggert);

        draggert.on("pressmove",function(evt) {
                // currentTarget will be the container that the event listener was added to:
                evt.currentTarget.x = evt.stageX;
                evt.currentTarget.y = evt.stageY;
                // make sure to redraw the stage to show the change:
                stage.update();   
            });
      }


            var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
            label.textAlign = "center";
            label.y = -7;

            var draggerc = new createjs.Container();
            draggerc.x = draggerc.y = 100;
            draggerc.addChild(circle, label);
            stage.addChild(draggerc);

      var draggers = new createjs.Container();
      draggers.x = draggers.y = 100;
      draggers.addChild(square);
      stage.addChild(draggers);

      var draggerr = new createjs.Container();
      draggerr.x = draggerr.y = 100;
      draggerr.addChild(rec);
      stage.addChild(draggerr);

            draggerc.on("pressmove",function(evt) {
                // currentTarget will be the container that the event listener was added to:
                evt.currentTarget.x = evt.stageX;
                evt.currentTarget.y = evt.stageY;
                // make sure to redraw the stage to show the change:
                stage.update();   
            });

      draggers.on("pressmove",function(evt) {
                // currentTarget will be the container that the event listener was added to:
                evt.currentTarget.x = evt.stageX;
                evt.currentTarget.y = evt.stageY;
                // make sure to redraw the stage to show the change:
                stage.update();   
            });

      draggerr.on("pressmove",function(evt) {
                // currentTarget will be the container that the event listener was added to:
                evt.currentTarget.x = evt.stageX;
                evt.currentTarget.y = evt.stageY;
                // make sure to redraw the stage to show the change:
                stage.update();   
            });

            stage.update();
        }

HTML:
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="200">
        alternate content
    </canvas>
  <button class = "test">Test</button>
</body>

我有我正在做的演示，在 CodePen 上：https://codepen.io/AoifeMcNeill/pen/bvZJEg?editors=1010

这是我正在开展的一个更大项目的一部分，也是我真正努力工作的部分。我尝试过 Easeljs、Createjs、Paperjs、Konvajs、HTML5 native 等。我要么做错了，要么遗漏了一些明显的东西。我一直在自学画布，因为这是我的年终项目。无论如何，如果您想尝试帮助解决我遇到的问题，这是该代码的 CodePen：https://codepen.io/AoifeMcNeill/pen/VXqXgv?editors=1000

如果你能对其中任何一个提供帮助，那就太棒了！

【问题讨论】：

标签： jquery button html5-canvas createjs easeljs

【解决方案1】：

所以这里有几个问题导致它无法按预期工作。首先你的范围是错误的，所以函数 testButton 是未定义的，永远不会被解雇。我会通过删除 jquery 函数并使用普通的旧 javascript 来简化事情：

HTML

<button id="testBtn" class="test">Test</button>

testBtn = document.getElementById("testBtn");
testBtn.addEventListener("click", testButton)

我看到的第二个问题是，当 testButton 最终被解雇时，您没有更新阶段。

用这个替换那个函数：

function testButton(){

    var testsquare = new createjs.Shape(); 
    //Add color to see that a new shape was created 
    var color = createjs.Graphics.getHSL(Math.random()*360| 0 , 100, 50);testsquare.graphics.beginFill(color).drawRect(0, 0, 50, 50);

    var draggert = new createjs.Container();
     //Added in random position to see newly created shape
    draggert.x = Math.random()*100;
    draggert.y = Math.random()*100;
    draggert.addChild(testsquare);
    stage.addChild(draggert);

    draggert.on("pressmove",function(evt) {
            // currentTarget will be the container that the event listener was added to:
            evt.currentTarget.x = evt.stageX;
            evt.currentTarget.y = evt.stageY;
            // make sure to redraw the stage to show the change:
            // this will only happen when shape is moved
            stage.update();   
        });
    //Update stage when new shape is created
    stage.update();   
  }

【讨论】：

我尝试直接复制和粘贴您提供的代码（您指出错误所在的位置），不幸的是，它仍然无法正常工作。你可能有一个可行的例子吗？编辑：发现我犯的错误。将按钮事件侦听器放在 init 函数之外。现在可以了。非常感谢。把这个作为答案。