fabricjs

How can I prevent both vertical and horizontal stretching of contained text while resizing text-based objects in Fabric.js?

为君一笑 提交于 2021-02-20 00:42:40
问题 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:

FabricJS - Preserve events on saving / getting canvas from JSON

孤街浪徒 提交于 2021-02-19 06:27:04
问题 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

Fabric JS: How to Transform Fabric Image

僤鯓⒐⒋嵵緔 提交于 2021-02-19 04:41:06
问题 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})

How to disable selection freedrawing fabricjs

狂风中的少年 提交于 2021-02-18 12:14:11
问题 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

How to select covered objects via mouse in fabricJS?

时光总嘲笑我的痴心妄想 提交于 2021-02-18 08:24:15
问题 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

How to select covered objects via mouse in fabricJS?

你离开我真会死。 提交于 2021-02-18 08:23:47
问题 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

Fabric JS 2.4.1 How to use clipPath to crop image that has been scaled smaller or larger then 1:1 Ratio

橙三吉。 提交于 2021-02-11 14:27:51
问题 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

FabricJS iText Width And Height

拟墨画扇 提交于 2021-02-10 15:05:35
问题 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

Change canvas shape

不想你离开。 提交于 2021-02-09 18:50:57
问题 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

using fabric.js ,increase fontSize of canvas text on button click

萝らか妹 提交于 2021-02-07 18:34:15
问题 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 (