There exists legacy application having 3 canvas. First canvas to display objects which is stored in container, second canvas when object is selected and third one when object is moved or added for editing. I want to use the text and image feature of fabricJS into my existing application. While creating fabricJS canvas, i provided editing canvas object then all the mouse events bind to the editing canvas stopped working. So does there exists way to use fabricJS into existing application only for using the text and image feature of fabricJS.
You should be able to dynamically assign a z-index value to a canvas layer to expose or hide the layer to mouse events.
For the layers that you want to hide mouse events from, set z-index value to -1. For the layer that you want to expose to mouse events, set z-index value to 1.
var textLayer = document.getElementById("text-layer");
textLayer.style["z-index"] = 1;
Related
I want to have an image, on top of which I can mark points (which I should be able to drag across the image).
The image is also going to be bigger than the canvas, so I want to be able to drag it as well, but while doing so keeping it in the background, and moving all the marks on it along with it.
I thought using a Group, disabling the controls of all objects and disabling selection for the Canvas would do the trick:
fabric.Object.prototype.hasControls = fabric.Object.prototype.hasBorders = false;
let fabricCanvasObj = new fabric.Canvas(canvas);
fabricCanvasObj.scene = new fabric.Group([new fabric.Image(img)]);
fabricCanvasObj.add(fabricCanvasObj.scene);
fabricCanvasObj.selection = false;
But now I want that on mouse:down a new point will be added, unless the mouse is over an already created point, so that when the user want to move that mark, no new mark is created in its place, and I want to move that individual point instead of the whole group.
But the event.target is the whole group, not the individual object in that group.
I've then followed the solution here: FabricJS Catch click on object inside group
Which suggested using
{subTargetCheck: true}
But this causes an exception to be thrown once I add an object to the group after it's been created.
How should I go about this?
I am creating grid on fabric canvas, where the user can upload images in each cell of a grid. Each cell has a clipping mask, and everything is fine. But my problem is, that if the user moves an image in one cell you can see selection outside of the clipping mask. Is there a way to keep the selection inside clipping mask?
here is a screen shot
Try to add in your canvas options the next option controlsAboveOverlay: true
const canvas = new fabric.Canvas("c", {
controlsAboveOverlay: true
});
http://fabricjs.com/docs/fabric.Canvas.html#controlsAboveOverlay
Edit:
Added an example with perPixelTargetFind option
https://codesandbox.io/s/kind-shtern-hq20u?file=/src/index.js
I have been trying to find an example or some hints on how to create an app that I could drag, resize, rotate images onto a UIView and then save the individual pieces (including their size, rotation and placement) and the entire UIView into CoreData. Kind of like the omnigraffle app.
Any tutorials, examples or anything on any piece of the app would be greatly appreciated.
for dragging a view
http://www.cocoacontrols.com/platforms/ios/controls/tkdragview
for roting a view http://www.cocoacontrols.com/platforms/ios/controls/ktonefingerrotationgesturerecognizer
for resizing a view
http://www.cocoacontrols.com/platforms/ios/controls/spuserresizableview
What respects to core data, its actually pretty straightforward just, gather the classes in one view, see the properties you need to save, and the new one you will need for your app and thats it.
Like:
Object Canvas containing a many relationship to morphlingViews wich contain all the properties as center, color, width, height, angle, UIPath (if you plan to create custom shapes) layer position (so it gets drawn correctly) and if you plan to connect the views as omnigraffle add a many realtionship to self (in morphlingViews) so you can take the center of different morphlingViews and add a simple line between them. (and a string if you plan to add drawInRect method to allow users to write in the objects, then it will be a good idea to add the text properties as well).
You can also add Quartz Composer drawing styles properties to the object, as shadow, shadowColor, shadowOffset, or add patterColor to add resizable background.
I want to add large string content to a container dynamically.
There are 60 different contents(strings) to be displayed in this container.
To add the string to container, I am adding a TextArea(empty border with 100% transparency).
The problem is that TextArea offers scroll and I do not want it to scroll. Instead I want to grow(increase height) according to content. I am unable to achieve this.
Can you help me out with this?
Or can I use any other component for the purpose?
I am using LWUIT with J2ME.
You can derive text area and return false for isScrollableY() although it should generally work seamlessly even if you don't do that (since your parent layout is scrollable). Is it possible you changed the text area and don't revalidate the parent form on the EDT?
There are problems with text area layout when it is modified by a separate thread (race condition with the layout code).
First put the TextArea.setSingleLineTextArea(false) , and grow by content true.
I want to know how to create a label that contains two icons, one on each side and set it as the title bar for the form element (LWUIT widgets).
Form has a function to get a titleArea then you can put some components what you want.
Form f = new Form();
Container c = f.getTitleArea();
Label iconLabel1 = new Label("leftIcon");//using Image
Label iconLabel2 = new Label("rightIcon");//using Image
c.addComponent(BorderLayout.WEST, iconLabel1);
c.addComponent(BorderLayout.EAST, iconLabel2);
You can just add a component to the north portion of the screen which is the recommended way that will work properly and won't break for newer versions of LWUIT/Codename One.
When you don't set a title it will just work and you can give it the Title UIID. LWUIT 1.5 and newer have a TitleArea container but I suggest you stay away from it since CodenameOne customizes it quite allot for iOS/Android 4.x etc.
Use the setTitleComponent(Label title) method.
EDIT :
Derive the Label class and implement the paint method where you can use the Graphics method to draw Images and texts. Also set the label's text position to Label.CENTER .