When I select text in added to canvas iText2 object, it has some padding at the bottom. But when I do the same on fiddle I don't have such problem.
Please help me to understand because of what it happens.
Istead of
there.
please, check and change coordinate value of "pathOffset" attribute on text object or group object in fabric.js.
If you have question, let me know.
Related
I've got Wrong Text Placement during rendering of each node in GetOrgChart.Please see the Screenshot
Please Help me to fix it.
I don't know why But I realized that the only way to adjust X or Y Positioning of text node in GetOrgChart is modifying the textPoints OR textPointsNoImages based on whether we have image node or not in related theme Array.
I'm trying to create a simple effect of a mouseover (or hover) in processing. I have been able to do this effect on shapes only, such as rectangles, ellipses etc. but I cannot figure out how to do it on text objects.
For example to detect mouseover on a circle:
if (sqrt(sq(x - mouseX) + sq(y - mouseX)) < diameter/2 ) {
return true;
} else {
return false;
}
The effect will be as simple as changing the text color to indicate that the mouse is over the text.
Any help is appreciated, thanks!
Use a bounding box which is just a rectangle that is "drawn" around the text. (That rectangle usually doesn't actually get drawn, except for debugging.)
You can get the bounding box of text using the textWidth() function and its friends, which you can read about in the reference.
Then when you have that bounding box, you can use the collision detection code for rectangles that you already have.
In the future, please try to post a MCVE instead of posting a disconnected snippet.
I have created a master shape which is a small rectangle. I used the code to extract the coordinates from a *.CSV file, made the master shape to be dropped on the page and apply those coordinated to it. As it turns out that the final shape is much larger than the initial master shape I created. My problem is the alignment box that surrounds the shape, for resize and rotation, is still the same small size as it was in the original shape. Is it possible to make the alignment box reset to the new shape?
Here is an image. The gray area is the new shape. The wire like rectangle is the alignment box of master shape. The top image shows the gray area as the new shape and the tiny wire like alignment box in the lower left corner of the shape. This is how it comes out.
What I want is shown in the second image. The alignment box should cover the entire shape and not just the tiny lower left corner.
How do I make the alignment box to cover the entire shape?
How do I get this to work? Any thoughts?
As always, any help is appreciated.
Thank you!
-Miki
Ok, I found the solution to this question via Visioguy forum and I am posting the answer here so that incase someone might end up here trying to find the same thing.
In Visio, there is a function called, "Update Alignment Box". I used that function and added a line to my code to do it programmatically.
Here is the line:
activewindow.selection.updatealignmentbox
-Miki
In fabricjs when we place an object on the canvas and select it, the grapples appear. For rotation there is this grapple which appears at the end.
Is there a way in fabric to hide the rotation grapple and instead have the drag grapples do the rotation as well, like the corner grapples could be used for rotation?
Any customization on this possible?
Thanks in advance.
You can easily customise the handles, see the documentation here http://fabricjs.com/customization/
I am working on a SVG application and now want to let a user resize an object using draggable corners, very much like in SVG-edit (http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html).
The functionality should work as follows: The user selects an SVG object, drags it to the main ‘canvas’ and once on the ‘canvas’, four corners on the outside of the object appear, the user can drag on each of the corner points & drag to enlarge the object. The objects will be rectangular in shape and created using paths, not using the SVG ‘rect’ function.
Would anyone have any suggestions as to how this should be implemented?
Thanks in Advance
You could take a look at some existing open source implementations. svg-edit is one which you already mentioned.
To showcase a tool that I developed, I wrote a demo which implements this functionality. This which may serve as a simpler and more restrictive example than svg-edit, as it doesn't do too much other than allow you to draw rects and circles, and rotate/translate/scale them.
I have edited jquery to make rect draggable, recently put them in a g and lost this functionality. The g doesn't contain the position data.
Might be possible to bubble down to the children elements.