fabricjs

Frabricjs - Limit Text Input Area

由 a 夏天 提交于 2019-12-08 05:13:37
问题 I am trying to add some input fields / text area to the canvas. I would like to somehow set the area where this text could be displayed --> (x,y)-position, width, height of the area. The content should not flow outside the defined area. Is it possible to automatically change the font-size so that the content fits to the defined area? For example like here: http://www.my-wallsticker.de/index.php?cl=designer&html5=1&text=fabricjs Here is a part of my code where I add a text field with an area.

Fabric.js position elements relative to getZoom() and getWidth()/getHeight()

由 守給你的承諾、 提交于 2019-12-08 05:06:26
问题 I am using Fabric.js with React/Redux and i am trying to achieve the following effect on canvas: (note i have 2 rulers on the top and left which shouldn't move around when panning, just horizontally and vertically). This is a video of the effect I am trying to get: https://vid.me/qs5Q I have the following code: var canvas = new fabric.Canvas('c'); var topRuler = new fabric.Text('this is the top ruler', { top: 0, left: 60, selectable: false }); var leftRuler = new fabric.Text('this is the left

Fabricjs - How to detect total width/height of canvas where objects exist

由 笑着哭i 提交于 2019-12-08 04:42:46
问题 So I want to save the canvas based on scale 1 and I want to include all existing/visible objects. So right now, my canvas is 600x400 and if I were to save it, it would only save what's inside that 600x400, and it respects zoom level (a higher zoom will see less things, a lower zoom will see more things but smaller). I've gotten around this by running this code: let zoom = this.canvas.getZoom(); this.canvas.setZoom(1); let url = this.canvas.toDataURL({width: 1000, height: 700, multiplier: 1});

JavaScript - Dynamically create SVG and modify for cursor

由 这一生的挚爱 提交于 2019-12-08 04:18:06
问题 Say I have a HTML5 canvas (In this case using fabric.js), and I want to change the cursor over the canvas to represent whatever brush size and colour has been selected. I'm thinking there should be a way to do this by changing an SVG's properties (size & colour) dynamically with JS so we don't have to use multiple images. Any ideas on if this is possible? var canvas = new fabric.Canvas(c, { isDrawingMode: true, freeDrawingCursor: 'url("img/cursor.svg"), auto' }); 回答1: I think

How do i get point coordinates after object modified?

由 对着背影说爱祢 提交于 2019-12-08 04:11:47
问题 I would like to get the new point coordinates after object being modified but when i get the points coordinates after being modified they are the same point coordinates with which I have drawn the polygon. Can anyone please tell me why it so? Below is my code, <!--fabricjs --> canvas.on('object:modified', function(e){ var obj=e.target; console.log("new point coordinates "+obj.points); }); 回答1: Below is the code I used to get the updated points with ROTATE being disabled. But if I get the

Fabric js image filter

由 痞子三分冷 提交于 2019-12-08 04:03:47
问题 Is there a way to implement image filters to work like "text object editor" in fabric js? So, when I activate image object...image filters are shown and changes are applied on active object. And when I deactivate object...filters will dissapear. 回答1: I think this is what you need :) Tell me if you need detailed explanation... I'm too stupid for this text editor on stackoverflow :( //check jsfiddle :) http://jsfiddle.net/f6P3R/ 来源： https://stackoverflow.com/questions/23913260/fabric-js-image

FabricJS is not giving me movementX and movementY to pan a image in IE, however it works fine in other browsers

由 拜拜、爱过 提交于 2019-12-08 03:47:48
问题 I am loading a image in fabric.js and trying to add pan functionality to the image using this link . However, it works fine in Firefox, Chrome but doesn't work in IE(it just renders the image). Here's the code : var panImg = function () { var panning = false; canvas.on('mouse:up', function (e) { panning = false; }); canvas.on('mouse:out', function (e) { panning = false; }); canvas.on('mouse:down', function (e) { panning = true; }); canvas.on('mouse:move', function(e) { if (panning && e && e.e

How to insert an image in canvas and after that insert text in this canvas?

由 时光毁灭记忆、已成空白 提交于 2019-12-08 03:15:35
问题 I'm trying to insert an image in a canvas and after that I want to insert an input text in the same canvas, but I can't do it. How can I fix this problem? Now, I want that the user insert a draggable text in the actual canvas. The people say that using Fabric.js is easy, but I can't get it working: canvas = document.getElementById("canvasThumbResult"); var context = canvas.getContext("2d"); var img = document.getElementById("target"); context.drawImage(img, getX, getY, getWidth, getHeight, 0,

Line-by-line text background color padding in Fabric JS / Canvas

由 試著忘記壹切 提交于 2019-12-08 02:55:29
I am using the library FabricJS to overlay text on canvas. I need to add padding (ideally just left & right) to a text element that includes the property textBackgroundColor. Here is what I've tried so far: let textObject = new fabric.Text('Black & White',{ fontFamily: this.theme.font, fontSize: this.theme.size, textBaseline: 'bottom', textBackgroundColor: '#000000', left: 0, top: 0, width: 100, height: 40, padding: 20, fill: 'white', }); The padding doesn't work as I anticipated. I have attempted to use the backgroundColor property but that adds background to the whole group block and not

Fabric js displaced resize rotate controls

由 给你一囗甜甜゛ 提交于 2019-12-08 02:34:35
问题 I have a simple fabric.canvas element which has a background and I have set its width and height equal to that of the above image. and then added the cap image. the problem is that the resize controls are displaced. I have made this clear in the image too. This is how I am adding the canvas to the page $('#canvas_container').empty(); canvas_el = document.createElement('canvas'); canvas_el.id = "canvas"; $('#canvas_container').append(canvas_el); canvas = new fabric.Canvas('canvas'); var img =
订阅 fabricjs