因此，我无法使用外部按钮在画布上绘制形状 onclick。它只是行不通。我究竟做错了什么？我尝试使用 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 等。我要么完全错误，要么遗漏了一些明显的东西。我一直在自学 Canvas，因为这是我的年终项目。无论如何，如果您想尝试帮助解决我遇到的问题，请使用 CodePen：https ://codepen.io/AoifeMcNeill/pen/VXqXgv?editors=1000
如果你能帮助其中任何一个，那就太棒了！
所以这里有几个问题导致它不能按预期工作。首先你的范围是错误的，所以函数testButton是未定义的，永远不会被触发。我会通过删除 jquery 函数并使用普通的旧 javascript 来简化事情：
HTML
<button id="testBtn" class="test">Test</button>
JS
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();
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句