FabricJS: How to get the positions of an updated path - javascript

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

Related

How to set box-sizing model for mxGraph vertexes?

When using mxHierarchicalLayout together with strokeWidth > 1 borders for all topmost and leftmost vertexes will be displayed incorrectly. See the screenshot below:
That is because border width doesn't count to total vertex height/width.
Is there a possibility to set box sizing model for mxGraph the same way box-sizing: border-box; works for CSS?
If no, is it possible to move entire graph context downward or leftward after it has been laid by layout engine?
I think that the borders are drawn correctly but the problem is that the leftmost and topmost vertices' borders get hidden because they are placed "behind" the canvas, so a workaround would be to move your whole graph a little to the bottom and to the right dependening on your needs. Code to do this:
let layout = new mxHierarchicalLayout(graph);
layout.execute(graph.getDefaultParent());
graph.model.beginUpdate();
let children = graph.getChildCells();
graph.moveCells(children, undefined , 20); // assuming you want to "move your graph 20px to the bottom"
graph.model.endUpdate();
You can use the same function to move horizontally your graph (left-right), check the
moveCells function of mxGraph.js
mxGraph.prototype.moveCells = function(cells, dx, dy, clone, target, evt, mapping)

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'
});

CreateJS how to animate a rectangles width and height?

So I am trying to animate a rectangles size with Createjs. I found there are two ways to create a rectangle. Either:
var rectangle = new createjs.Rectangle(0,0,100,100);
or
var rectangle = createjs.Shape();
rectangle.graphics.beginFill("000000").drawRect(x,y,w,h);
when I add it to the stage on the first call it doesn't add. However I seem to be able to access the rectangles height and width with rectangle.width and rectangle.height. However; on the second call I don't have this sort of control. What I would like to do is access these properties with a Tween.
createjs.Tween.get(rectangle).to({width:###, height:###}, timeinmilli);
The only thing that I've had some success with is rectangle.scaleX and rectangle.scaleY however this moves the rectangle across the screen accordingly and I do not want this. Anyone know of some easy solutions to access and rectangles height and width properties in order to animate with them?
An EaselJS Rectangle is just geometry - defining an x, y, width, and height (and that's it!). It is used to define rectangular areas such as sourceRect, object bounds, etc.
The Graphics.drawRect() method is what you want (your second example).
In earlier versions of EaselJS, you need to redraw the shape with a new size, remembering to clear it first (and update the stage). In newer versions (0.7.0+) you can use command objects to modify graphics much easier:
// Store off a command (the "command" after any graphics operation)
var rectangleCommand = rectangle.graphics.drawRect(0,0,100,100).command;
// Modify it
rectangleCommand.w = 300;
I threw a quick fiddle together: http://jsfiddle.net/215wj7aL/
Here is another sample using Tween: http://jsfiddle.net/215wj7aL/1/
You can see the documentation for all the commands online, for example, here is the DrawRect command: http://createjs.com/docs/easeljs/classes/Graphics.Rect.html -- check out all the commands in the side menu for a full list.
The Rectangle class represents a geometric rectangle, with helper methods, not a Shape to draw.
You can either update your draw each tick, or you can use a retained draw command.
var rectCmd = myShape.graphics.beginFill("red").drawRect(0,0,100,100).command;
//.. later:
rectCmd.w = 200;
http://createjs.com/docs/easeljs/classes/Graphics.html#property_command
http://createjs.com/docs/easeljs/classes/Graphics.Rect.html

Fabric.js adding simple path not working

I'm trying to create a simple path object using Farbic.js. When the path is added to canvas, it does not appear to be positioned correctly. Here is my code:
HTML
<canvas id="c" height="300" width="300"></canvas>
JS
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = '#f5f5f5';
var line = new fabric.Path('M 0 0 L 100 100',{
stroke: 'black',
fill: ''
});
canvas.add(line);
According to the data I'm passing in, the path should start at point 0,0 and draw a line to point 100, 100. However, my line is actually being placed at point 50,50, as you can see by the alert.
Why isn't the path starting at point 0,0?
Here's a fiddle: http://jsfiddle.net/flyingL123/h14th5pf/3/
You can specify the position properties of your path explicitly.
line.set({top: 0, left: 0});
Fabric.JS seems to include some sort of computed padding by default, based on the line length and canvas size. Try adjusting your canvas dimensions and line length and you'll see the top and left values update automatically.
Edit: It appears Fabric.JS may use the center of the canvas to calculate the X,Y positions for canvases. It may use a similar scheme for path origin points. See this related StackOverflow question:
Canvas coordinates in Fabric.js have offset
It seems to be part of how the library calculates positions automatically. Per the comments of the linked question, you can fix this with:
fabric.Object.prototype.originX = true;
fabric.Object.prototype.originY = true;
And you wont have to adjust the originX or originY properties on each path object.

view areas with canvas and createjs/easeljs

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;

Categories

Resources