fabricjs

问题 I want to be able to scale text-based objects (for example with classes and subclasses of IText, Textbox) without stretching the text inside of the object. The interaction of scaling and moving is on user-side (UI), not programmatically (I am working on a drawing editor). The behaviour I am looking for is similar to the one in the sticky notes apps: You can scale the paper but this action does not scale your text too. I have already checked this, but this is only for horizontal prevention:

问题 Is there a way to "preserve" events when saving canvas to JSON and then get them bonded back on loadFromJSON In the link below I've created an element redBox and bonded an event "moving" on it. After "restoring" canvas from JSON that event no longer available and it makes sense why... The problem is, based on requirements, I have no idea what element could be in the JSON and what event was previously applied to it. Basically, I need dynamically apply all possible events on that particular

问题 How Can I skew and Scale left or right a Fabric Image inside a Canvas using Fabric JS? I need it to follow the way this monitor is being displayed so I can paste it like it is being displayed on the screen 回答1: Please go through this link. You can set transform and skew as Fiddle var canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL("https://www.google.co.in/images/srpr/logo11w.png", function(img) { img.set({transformMatrix: [1, .30, 0, 1, 0, 0],width:200,height:50,top:100,left:150})

问题 After you draw something with FreeDrawing in FabricJs, you are able to select what was drawn and move it. Is there a way to disable this selection? 回答1: In case you don't need any interactivity on your canvas, you can use StaticCanvas var canvas = this.__canvas = new fabric.StaticCanvas('c'); Or, in case you want to disable selection only for specific objects, i.e. the last brush stroke, you can try calling the following code every time the stroke is created: canvas.item(0).selectable = false

问题 I'm trying to develop a way to select objects that are layered below and (totally) covered by other objects. One idea is to select the top object and then via doubleclick walk downwards through the layers. This is what I got at the moment: var canvas = new fabric.Canvas("c"); fabric.util.addListener(canvas.upperCanvasEl, "dblclick", function (e) { var _canvas = canvas; var _mouse = _canvas.getPointer(e); var _active = _canvas.getActiveObject(); if (e.target) { var _targets = _canvas

问题 I'm trying to develop a way to select objects that are layered below and (totally) covered by other objects. One idea is to select the top object and then via doubleclick walk downwards through the layers. This is what I got at the moment: var canvas = new fabric.Canvas("c"); fabric.util.addListener(canvas.upperCanvasEl, "dblclick", function (e) { var _canvas = canvas; var _mouse = _canvas.getPointer(e); var _active = _canvas.getActiveObject(); if (e.target) { var _targets = _canvas

问题 I have been trying to figure out what I am doing wrong when calculation the position and size of the mask rectangle once the target image has been resized. Below is the documentation from fabric JS: clipPath :fabric.Object a fabricObject that, without stroke define a clipping area with their shape. filled in black the clipPath object gets used when the object has rendered, and the context is placed in the center of the object cacheCanvas. If you want 0,0 of a clipPath to align with an object

问题 Is there a way to set the width and height of an iText object? When creating the object if you set width and height it doesn't do anything. What I am after is the bounding box to be a fixed size on the canvas as an editable region, I have already extended the iText class to allow for individual character editing but I can't seem to work out how to size the box as a fixed size and allow content editing inside of it. Bare in mind that the text box can't be moved or scaled, it's static. 回答1: It

问题 What I'd like to achieve: I need to load different images in different canvas, move and resize them and show a preview. I'm using fabricJs. With rectangular canvas everything works fine, the problem is when I want to concatenate canvas with a diagonal section. Something like this: I tried something with the transform property in CSS, but then I could no longer interract with the canvas. Any idea on how to do this? Or is there a way to have only one canvas with something like sections? What I

问题 i am using fabric.js to work on canvas . i have created text on canvas .now,onclick of button i want to increase font-size . canvas.set({fontSize,40}); this is not working ? any other method .i have created fiddle please Check var canvas = window._canvas = new fabric.Canvas('c'); var text = new fabric.Text('Sample', { left: 100, top: 100, fill: 'navy' }); canvas.add(text); document.getElementById('textinput').addEventListener('change', function (e) { var obj = canvas.getActiveObject(); if (