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'
});
Related
I was creating some visual elements using Fabric js. In my project, the path's were getting updated. But the issue is, the path's measurements were not as expected.
Refrer to jsFiddle
var canvas = new fabric.Canvas('c', {width: 400, height: 400});
var line = new fabric.Path('M,50,50,L,50,150,150,150,150,50,Z', {
fill: 'blue'
});
line.setCoords();
// During update
line.initialize('M,150,50,L,150,150,300,150,300,50,Z')
line.setCoords();
canvas.renderAll();
In the sample the path was initially drawn 50px away from the canvas left border. Then I have changed the path command so that it move's 100px towards the right.
But after updating the path, the shape is actually positioned at 175px away from the left.
Also, the left property of the path element is not changed.
Also, unable to get the idea of all these properties and their relations like,
left, top, scaleX, scaleY, height, width, pathOffset, oCoords, originalState etc in various conditions like the path / canvas is scaled, rotated, moved, placed inside a group etc.
I'm not sure what you are trying to achieve but the initialize method is not an update method but it's the constructor of the class, you are practically overriding the initial object's path.
If your are just trying to move around your original created path you should play with left, top properties of the Path object like in this updated fiddler
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;
Heyhey,
while learning JS and using KineticJS I am stuck with a little problem.
As Iam not able to get my own code into a fiddle right now lets take this example:
http://jsfiddle.net/m1erickson/n5xMs/
If we make the white rect also draggable:
var white = new Kinetic.Rect({
x: 20,
y: 20,
width: 300,
height: 300,
fill: 'white',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
the dragBoundFunc won´t work correctly anymore if the white rect is moved around. While debugging this with coda2, I found that when the white rect is dragged around, that the x and y attrs do not change.
Why is that so? How do I manage to make the dragBoundFunc work for moving parent-shapes?
thanks in advance for your help.
First of all:
I found that when the white rect is dragged around, that the x and y attrs do not change.
No, they don't, because they're defined statically. If you wanted changing values, you'd want to get the updated values within the dragBoundFunc. It might be as simple as calculating them the same way they are now, but inside that function.
How do I manage to make the dragBoundFunc work for moving parent-shapes?
In your example the white rectangle isn't a parent of anything, it's just a shape drawn on the same stage as the orange rectangle. What you want to do is make the white shape background and the orange rectangle both children of the same node, and drag that. The most direct way to do this here would be to make the layer itself draggable, e.g.:
var layer = new Kinetic.Layer({draggable: true});
But how you do this is arbitrary. The white and orange boxes might also be children of another Kinetic.Container, for example.
I am working on some image viewing tools in KineticJS. I have a rotate tool. When you move the mouse over an image, a line appears from the centre of the image to the mouse position, and then when you click and move, the line follows and the image rotates around that point, in sync with the line. This works great.
My issue is, I have the following set up:
Canvas->
Stage->
Layer->
GroupA->
GroupB->
Image
This is because I draw tabs for options on GroupA and regard it as a container for the image. GroupB is used because I flip GroupB to flip the image ( and down the track, any objects like Text and Paths that I add to the image ), so that it flips but stays in place. This all works well. I am also hoping when I offer zoom, to zoom groupb and thus zoom anything drawn on the image, but for groupA to create clipping and continue to support drag buttons, etc.
The object I am rotating, is GroupA. Here is the method I call to set up rotation:
this.init = function(control)
{
console.log("Initing rotate for : " + control.id());
RotateTool.isMouseDown = false;
RotateTool.startRot = isNaN(control.getRotationDeg()) ? 0 : control.getRotationDeg();
RotateTool.lastAngle = control.parent.rotation() / RotateTool.factor;
RotateTool.startAngle = control.parent.rotation();
this.image = control.parent;
var center = this.getCentrePoint();
RotateTool.middleX = this.image.getAbsolutePosition().x + center.x;
RotateTool.middleY = this.image.getAbsolutePosition().y + center.y;
this.image.x(this.image.x() + center.x - this.image.offsetX());
this.image.y(this.image.y() + center.y - this.image.offsetY());
this.image.offsetX(center.x);
this.image.offsetY(center.y);
}
getCentrePoint is a method that uses trig to get the size of the image, based on the rotation. As I draw a line to the centre of the image, I can tell it's working well, to start with. I've also stepped in to it and it always returns values only slightly higher than the actual width and height, they always look like they should be about what I'd expect, for the angle of the image.
Here is the code I use on mouse move to rotate the image:
this.layerMouseMove = function (evt, layer)
{
if (RotateTool.isRotating == false)
return;
if (!Util.isNull(this.image) && !Util.isNull(this.line))
{
if (Item.moving && !RotateTool.isRotating)
{
console.log("layer mousemove item moving");
RotateTool.layerMouseUp(evt, layer);
}
else
{
var pt = this.translatePoint(evt.x, evt.y);
var x = pt.x;
var y = pt.y;
var end = this.getPoint(x, y, .8);
RotateTool.line.points([this.middleX, this.middleY, end.x, end.y]);
RotateTool.line.parent.draw();
RotateTool.sign.x(x - 20);
RotateTool.sign.y(y - 20);
var angle = Util.findAngle({ x: RotateTool.startX, y: RotateTool.startY }, { x: x, y: y }, { x: RotateTool.middleX, y: RotateTool.middleY });
var newRot = (angle) + RotateTool.startAngle;
RotateTool.image.rotation(newRot);
console.log(newRot);
}
}
}
Much of this code is ephemeral, it's maintaining the line ( which is 80% of the length from the centre to my mouse, as I also show a rotate icon, over the mouse.
Sorry for the long windedness, I'm trying to make sure I am clear, and that it's obvious that I've done a lot of work before asking for help.
So, here is my issue. After I've rotated a few times, when I click again, the 'centre' point that the line draws to, is way off the bottom right of my screen, and if I set a break point, sure enough, the absolute position of my groups are no longer in sync. This seems to me like my rotation has moved the image in the manner I hoped, but moved my group off screen. When I set offsetX and offsetY, do I need to also set it on all the children ? But, it's the bottom child I can see, and the top group I set those things on, so I don't really understand how this is happening.
I do notice my image jumps a few pixels when I move the mouse over it ( which is when the init method is called ) so I feel like perhaps I am just out slightly somewhere, and it's causing this flow on effect. I've done some more testing, and my image always jumps slightly up and to the right when I move the mouse over it, and the rotate tool continues to work reliably, so long as I don't move the mouse over the image again, causing my init method to call. It seems like every time this is called, is when it breaks. So, I could just call it once, but I'd have to associate the data with the image then, for the simple reason that once I have many images, I'll need to change my data as my selected image changes. Either way, I'd prefer to understand and resolve the issue, than just hide it.
Any help appreciated.
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/