How do you remove only the shape that's in CreateJS? For my example, I have created a few squares with a function called createSquare. My goal is to have a function, or a click event, that removes only the square that is clicked.
I have tried event listeners and on click, and have had no luck. I have commented out the code that I tried to use.
Here is a link to a working fiddle.
JS is as follows:
var canvas;
var stage;
var square;
function init() {
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
}
function createSquare(){
square = new createjs.Shape();
square.graphics.beginFill("red").drawRect(0, 0, 50, 50)
square.x = Math.random() * canvas.width;
square.y = Math.random() * canvas.height;
stage.addChild(square);
stage.update();
}
// This code should remove the squares
/*
square.on("click", function(evt) {
stage.removeChild(this);
});
*/
window.onload = init();
createSquare();
createSquare();
createSquare();
createSquare();
createSquare();
createSquare();
Event handlers in CreateJS are passed an event object. Mouse events receive a MouseEvent.
The target of the event will be what was clicked on.
square.on("click", function(evt) {
stage.removeChild(evt.target);
stage.update();
});
You will need to add the listener to each square when it is created.
Alternatively, you could listen to the stage one time.
stage.on("click", function(evt) {
stage.removeChild(evt.target);
stage.update();
});
Related
I want to have two event handlers.
one is when I click on the canvas based on mouseX an mouseY an image appears at a certain position (snap to grid).
The second is when I click on the same image that appeared I want this image to be removed.
The first event handler is implemented and work well the second doesn't work how can I make this happen?
Also I guess that when I want to remove my image the first event handler triggers and add a new image it's a vicious circle.
Here is my addImage() function:
function addImage(spaceX, spaceY, mouseX, mouseY, sizeX, sizeY, url) {
//spaceX/Y is the size of my grid
//mouseX/Y are the coordinates of my mouse
//sizeX/Y is the size of my canvas
//url is the url of my image.
fabric.Image.fromURL(url, function(oImg) {
var divX = sizeX / spaceX;
var resX = mouseX / sizeX * divX;
var indW = Math.trunc(resX); //X index in the grid
var divY = sizeY / spaceY;
var resY = mouseY / sizeY * divY;
var indH = Math.trunc(resY); //Y index in the grid
oImg.top = indH * spaceY;
oImg.left = indW * spaceX;
oImg.scaleToWidth(spaceX);
oImg.scaleToHeight(spaceY);
oImg.selectable = false;
//this is my non-working function to remove my image.
oImg.on('click', function() {
canvas.getActiveObject().remove();
})
canvas.add(oImg);
});
}
oImg.on('mousedown', function (){
canvas.remove(this);
})
use mousedown event for object.
DEMO
var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(oImg) {
oImg.on('mousedown', function (){
canvas.remove(this);
})
canvas.add(oImg);
});
canvas{
border:2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=500 height=400>
I have not been able to scroll through canvas move whole paper horizontally and
vertically.
It is possible?
<script type="text/javascript" src="~/Scripts/PaperJS/paper-full.js"></script>
<script type="text/javascript" src="~/Scripts/PaperJS/paper-core.js"></script>
<script>
$(document).ready(function () {
var canvas = document.getElementById('odbCanvas');
paper.setup(canvas);
var path = new paper.Path();
path.strokeColor = 'white';
var start = new paper.Point(100, 100);
path.moveTo(start);
path.lineTo(start.add(0,40));
path.lineTo(start.add(40,40));
path.lineTo(start.add(40,0));
path.lineTo(start.add(0,0));
paper.view.draw();
path.on('mousedrag', function (event) {
this.position = event.point;
});
});
</script>
You can use paper.view.scrollBy(new Point(x, y)) to scroll the whole View
Here's some example code:
// Draw a Rectangle for reference
var rect = new Path.Rectangle(new Point(200, 100), new Point(50, 50))
rect.strokeColor = 'black'
rect.strokeWidth = 1
// Create a Tool so we can listen for events
var toolPan = new paper.Tool()
toolPan.activate()
// On drag, scroll the View by the difference between mousedown
// and mouseup
toolPan.onMouseDrag = function (event) {
var delta = event.downPoint.subtract(event.point)
paper.view.scrollBy(delta)
}
And here's a Sketch for this (drag your mouse on the canvas)
Side note: You don't need to include both paper-core.js and paper-full.js. Use one or the other, depending whether you need PaperScript support as well (paper-full.js includes PS as well).
been looking at easeljs and seem to be confused about what's the best way to go about event delegation. Here's what I'm trying:
function init() {
var canvas = document.getElementById('canvas');
var stage = new createjs.Stage(canvas);
var txt1 = new createjs.Text('Test With Hit Area', '24px Arial', '#0000ff');
txt1.x = 50;
txt1.y = 50;
console.log('txt1', txt1);
var hit = new createjs.Shape();
hit.graphics.beginFill('#000000').drawRect(500, 50, txt1.getMeasuredWidth(), txt1.getMeasuredHeight())
txt1.hitArea = hit;
// neither seem to work with a hitArea
// txt1.addEventListener('click', handleClick);
txt1.on('click', handleClick);
var txt2 = new createjs.Text('Test Without Hit Area', '24px Arial', '#0000ff');
txt2.x = 50;
txt2.y = 80;
console.log('txt2', txt2);
// both addEventListener() and on() work fine without hit area
// txt2.addEventListener('click', handleClick);
txt2.on('click', handleClick);
stage.addChild(txt1, txt2);
stage.update();
}
function handleClick() {
console.log('clicked', this);
}
init();
I've created a simple jsfiddle to demonstrate my attempts here: http://jsfiddle.net/brrWn/1/
The hitArea will automatically align itself with the Shape, so you should set the x & y of the rectangle to 0,0.
hit.graphics.beginFill('#000000')
.drawRect(0, 0, txt1.getMeasuredWidth(), txt1.getMeasuredHeight())
http://jsfiddle.net/lannymcnie/brrWn/2/
I turned on mouseover and set the cursor, which makes it easier to visualize the hitArea.
Cheers.
I have an HTML5 canvas on a web page, with a JavaScript function that draws an image on the canvas. I'm trying to add a mouse event to the image, so that when it is clicked, another JavaScript function that is called, which will update what is displayed on the canvas.
When viewing the page in Firefox, nothing happens when I click the image that's displayed on the canvas. I'm using Firebug to try and see what's wrong, and it's given me the following message:
mouse_event is not defined
drawStartButton()index.html (line 107)
startGame()index.html (line 64)
(?)()index.html (line 1)
event = load
[Break On This Error]
...useX = (mouse_event.clientX-boundingBox.left) * (myGameCanvas.width/boundingBox....
index.html (line 107)
The function I've used to draw the start button on the canvas, and mouse event I've added are below:
function drawStartButton(){
image.onload = function(){
context.drawImage(image, 260.5, 60);
};
image.src = "StartButton.png";
/** Now I need to add an event listener to the area of the canvas on
on which the button image is displayed, in order to 'listen' for
a click on the button */
var boundingBox = myGameCanvas.getBoundingClientRect();
var mouseX = (mouse_event.clientX-boundingBox.left) * (myGameCanvas.width/boundingBox.width);
var mouseY = (mouse_event.clientY-boundingBox.top) * (myGameCanvas.height/boundingBox.height);
var pixels = context.getImageData(mouseX, mouseY, 1, 1); }
Basically, all I want to do, is that when the user clicks the button, the function below will be called, and will update the contents of the canvas:
function drawLevelOneElements(){
var context = canvas.getContext("2d");
/* Draw the images for numbers 1-10.*/
var image1 = new Image();
/* Test that this code is being executed */
context.moveTo(300, 300);
context.font = "11pt Calibri";
context.strokeStyle = "black";
context.strokeText("Testing",300, 300);
/* End of test */
image1.onLoad = function(){
context.drawImage(image1, 50, 50);
};
image1.src="1.png";
}
It seems I was able to solve this by putting the variables mouseX, mouseY and pixels in a function and setting the boundingBox.onmousemove property equal to this function:
boundingBox.onmousemove = function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
var pixels = context.getImageData(mouseX, mouseY, 1, 1);
}
I'm trying to draw elements to a canvas and then allow the user to resize them by clicking and dragging them. I've implemented this with Kinetic JS library, but my development team is moving over to Easel JS.
Here is the code with the Kinetic library.
This works well enough.
I get about this far in Easel JS, but this code doesn't do anything. The canvas is totally blank. I realize that I'm not sure how to:
call mouse events -- here I'm trying to attach them to the DOM element, as in this tutorial
where to set the resize function -- separate function? called within the tick() function?
grab the mouse coordinates
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();
}
}
I know it shouldn't be this difficult and would appreciate any help.