view areas with canvas and createjs/easeljs - javascript

I am working with CreateJs and the whole program I am working on is within a canvas element. Within that element I have a few (5-6 areas) where all the elements within it, should now go outside and should be cut.
I have made an image for you that explains the situation. The yellow part is the program. The red border is an area, where all elements within it should not go outside (I put an image in it, which is cut)
Do you have any idea how I can do that?

as mentioned by Marton I just masked the container. Here the code:
var container = new createjs.Container();
var maskShape = new craetejs.Shape();
maskShape.graphics.drawRect(50, 50, 200, 200); // x, y, width, height
container.mask = maskShape;

Related

Is it possible to delete an element off of a canvas using javascript without clearing the whole canvas?

What I would like to do is draw a circle on a canvas and then when a function is called delete the previous circle and draw a new one. Is this possible without having to redraw the whole canvas?
Take the code below for example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
A canvas is a collection of pixels (it's exactly like an image, however it's computed from code instead of being just loaded from file).
The only way to remove the old circle and draw the new one (if you want pixel perfect result) is repainting everything with the circle in the new position.
A possible solution could be using three distinct canvas elements layered one on top of the other:
whatever is behind the changing parts
the changing parts
whatever is covering the changing parts
1 and 3 can be kept fixed, you need to redraw only the second canvas.

How can I manage to move object between various layers?

I need to move object between layers, actually I have a main working area (say shape of square) and inside this working area I have a similar shape (bleed shape) same of the outer one but smaller in size, something like this :
https://jsfiddle.net/p0hszz22/24/ [see circle, square, rectangle shapes]
//# add main square
function addSquare() {
clearThisCanvas();
var square = new fabric.Rect({});
canvas.add(square);
addSquare1(); //call bleedline square
}
//# add bleedline square
function addSquare1() {
var square = new fabric.Rect({});
canvas.add(square);
centreOnCanvas(square);
}
So I got two objects on canvas, now my requirement is when I add any image and move that image(or any object) inside the working area the dotted line(bleed shape) should always be on above of my image, so that it shows the user hint that images or anything outside the bleed region will be ignored (present case : does not happened at all )
What I have tried :
I tried to change the order of these two shapes,and when I did the bleed shape hides itself when main shape(outer one) is selected.
I thought of making these shapes into a group but again no success.
How can I achieve this? all I need is to show the user as soon anything crosses the bleed line, it will not be considered.
Any link to study or keywords that I can again look for or any suggestion or any example will be helpful.
Thanks
PS: sorry for code in fiddle actually it was just to setup things quickly.
Try using an overlay image for the bleeding shape, maybe that fit your needs.
That image will always be on top of the other objects inside the canvas
canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png',
canvas.renderAll.bind(canvas), {
opacity: 0.5,
width : 400, // your width
height : 400, // your height
originX: 'center',
originY: 'center'
});

HTML image onmouseover event not firing

I have an image that's being displayed on an HTML5 canvas, to which I have added an onmouseover event that theoretically should call a JavaScript function that has been written in the same file.
However, when I view my page, and hover the cursor over the image, nothing happens.
I've added the image to a hidden section of my HTML using the line:
<img id="assetBox" src = "images/box.png" alt="Assets" onmouseover = "displayAssetDescriptionTip()"/>
The image has then been drawn to the canvas using the function:
function drawDescriptionBoxes(){
var assetsDescriptionBox = document.getElementById("assetBox");
var liabilitiesDescriptionBox = document.getElementById("liabilitiesBox");
var incomeDescriptionBox = document.getElementById("incomeBox");
var expenditureDescriptionBox = document.getElementById("expenditureBox");
assetsDescriptionBox.src = 'images/box.png';
liabilitiesDescriptionBox.src = 'images/box.png';
incomeDescriptionBox.src = 'images/box.png';
expenditureDescriptionBox.src = 'images/box.png';
context.drawImage(assetsDescriptionBox, 70, 400, 120, 70);
context.drawImage(liabilitiesDescriptionBox, 300, 400, 120, 70);
context.drawImage(incomeDescriptionBox, 530, 400, 120, 70);
context.drawImage(expenditureDescriptionBox, 760, 400, 120, 70);
context.strokeText("Assets", 100, 490);
context.strokeText("Liabilities", 325, 490);
context.strokeText("Income", 550, 490);
context.strokeText("Expenditure", 775, 490);
}
and the function that I want to be called when the cursor is detected as hovering over the image is:
function displayAssetDescriptionTip(){
document.getElementById('tipsParagraph').innerHTML = "Assets are items that can be bought or sold for cash.";
console.log("displayAssetDescriptionTip being called");
}
But, for some reason, when I view my page in the browser, and hover the cursor over the image on the canvas, nothing happens, and nothing is displayed in the console... I assume that this means that my onmouseover event isn't firing, but I have no idea why this is- can anyone explain it to me, and point out what I need to do to get it right?
Edit 22/02/2013 # 14:40
I tried adding the following JS to keep track of the mouse coordinates in one of the separate JS files I have:
/*Add code to keep track of the mouse coordinates */
var boundingBox = canvas.getBoundingClientRect();
var mousex = (mouse_event.clientX-boundingBox.left)*(canvas.width/boundingBox.width);
var mouseY = (mouse_event.clientY-boundingBox.top)*(canvas.height/boundingBox.height);
I know I will have to write the code to tell the script what to actually do with the coordinates, but I just wanted to give this a try first, since it's been a while since I've done any work with coordinates myself. But when I view the page in a browser, I'm getting a console error that says that "canvas is not defined, and complains about the line:
var boundingBox = canvas.getBoundingClientRect();
I'm wondering if this is because this is a separate script file, and doesn't actually have any reference to the canvas I'm using until where I've just added it. Do I need to define it again, even though it's already been defined in the HTML page that this script is being run on?
Just drawing an image doesn't magically make the image behave like a node. For instance, you can't change its src and have it automatically change the image shown on the canvas.
Instead, you have to manually track mouse movement with onmousemove on the canvas, then compute what the mouse is hovering over and do something about it. Having had experience making menus in Game Maker, I can tell you it's hard as hell!
This is an assumption, but the image that is drawn is a different element then the one that you have the onmouseover on. Try adding a class to the image and the one being drawn and set the onmouseover on the class (check jQuery to make this process easier)

Is HTML5 hit detection possible?

I have used the Canvas code provided elsewhere on this site to create a screen where I have several overlapping transparent pngs with the non-transparent parts being irregular shapes. I can get the color under the cursor and that is great. But my shapes are all the same color and I need a way to get the ID of the particular shape as well so I know which one was clicked on. Imagine a map made of overlapping pngs fo reach country and you want to detect which country was clicked on. From what I can tell, id detection only applies to rectangular regions. Any suggestions?
$('#myCanvas').click(function(e){
var position = findPos(this);
var x = e.pageX - position.x;
var y = e.pageY - position.y;
var coordinate = "x=" + x + ", y=" + y;
var canvas = this.getContext('2d');
var p = canvas.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
alert(hex);
});
This code gets and displays the color (findPos and rgbToHex are separate functions left off for clarity). I need an id! Help!
Even with transparency, the images are all rectangles. You then know which images are at a clicked point by rectangle intersection - check your array of images and their x,y points with width,height for point intersection. You then come up with an array of possibly clicked images. If there's only one in the list, you are done.
The images have an implied Z-order of the reverse order in which you wrote them, meaning, an image is overwritten by the next image written which overlaps it. You can use that to know which order to try them in for hit-testing if more than one is at the point clicked. The only trick is to detect if an image pixel is transparent or not.
To detect transparency for a pixel point clicked in a single image, you could keep a second hidden canvas element. Clear it, then write the target image to it at the same position, and use the same code to see if the clicked pixel within the second canvas is the transparent color. If it is, repeat this process with the next image in the Z-order until you get the image where a non-transparent pixel was clicked.
A small but important optimization is to check the color clicked first, and if it's the transparent color you already know none of the images were clicked on a non-transparent point.

Click on given element in canvas

Is there any trick to determine if user clicks on given element rendered in canvas? For example I'm displaying rhombus from .png file with transparent background and i want to know if user click inside or outside that figure (like mouse-element collision).
There is no concept of individual elements in a canvas - it is simply just an area that you're drawing pixels onto. SVG on the other hand is made up of elements which you can then bind events to. However there are a few approaches you can take to add click events to canvas:
Position an html element that overlays the area on the canvas you want to be clickable. A for a rectangular area or an image map for something more irregular.
Use separate canvases for each element that you want to be clickable.
CAKE - I haven't used this myself, but it's description is "SVG sans the XML". This may cover your needs. Demos here http://glimr.rubyforge.org/cake/canvas.html#EditableCurve
One idea is to draw the image to a temporary canvas, then use getImageDate() to receive data for the pixel you are interested in, and check if its alpha value is 0 ( = transparent).
The following is a sketch of a solution. It is assumed that...
x and y are the coordinates of the mouse click event
you are looping over gameObjects, the current object being stored in the variable gameObject
the game object has been initialized with an image, x and y coordinates
The following code would then check whether the click was on a transparent area:
var tempCanvas = document.createElement('canvas');
if (tempCanvas.getContext) {
tempContext = tempCanvas.getContext('2d');
}
tempContext.drawImage(gameObject.img, 0, 0);
var imgd = tempContext.getImageData(x - gameObject.x, y - gameObject.y, 1, 1);
var pix = imgd.data;
if (pix[3] == 0) {
// user clicked on transparent part of the image!
}
Note: This is probably quite inefficient. I'm sure someone can come up with a better solution.
I have solve this problem using kintech.js, tutorials and examples can be found: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

Categories

Resources