So I'm having trouble getting an external button to draw a shape onclick onto a canvas. It just won't work. What am I doing wrong? I tried using jQuery functions, and just native HTML5, but to no avail.
Code:
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>
I have the demo I'm working on, on CodePen here: https://codepen.io/AoifeMcNeill/pen/bvZJEg?editors=1010
This is part of a larger project I'm working on, and this is the part that I'm really struggling to get working. I've tried Easeljs, Createjs, Paperjs, Konvajs, HTML5 native, and so on. I'm either doing it completely wrong, or missing something obvious. I am teaching myself Canvas along the way, as this is my end of year project. Anyway, here's the CodePen for that one, if you want to try and help with what I'm stuck on: https://codepen.io/AoifeMcNeill/pen/VXqXgv?editors=1000
If you can help in anyway to either of those, that'd be amazing!
So there are a couple of issues here causing this not to work as expected. First off your scope is wrong, so the function testButton is undefined and will never be fired.
I would simplify things by removing the jquery function and use plain old javascript:
HTML
<button id="testBtn" class="test">Test</button>
JS
testBtn = document.getElementById("testBtn");
testBtn.addEventListener("click", testButton)
The second issue I see is that you are not updating the stage when testButton eventually gets fired.
Replace that function with this:
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();
}