fabricjs

How to zoom all elements pof canvas with one click?

由 ￣綄美尐妖づ 提交于 2019-12-07 05:47:24
I m using fabric.js in one of my projects. I m using zooming functionalities . I would like to know if there a simple way to zoom all the canvas (with all the elements ) in on click. Try out this jsfiddle demonstrating zoom onclick of a button: http://jsfiddle.net/cmontgomery/H7Utw/1/ . In essence you get all objects on the canvas and scale/move them by the same factor, giving the visual appearance of zoom. var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var

adding custom attributes to fabricjs object

由 假如想象 提交于 2019-12-07 05:39:26
问题 Im trying to add a custom attribute to a fabric js object that i have: var trimLine = new fabric.Rect({ width: Math.round(obj.box_dimensions.box.width,2), height: Math.round(obj.box_dimensions.box.height,2), strokeWidth: 1, stroke: 'rgb(255,2,2)', fill: '', selectable: false }); so thats my rectangle im trying to add and i want to pass a name or id in it to be able to identify it later when i get the canvas object and convert it to a json. I have tried doing var trimLine = new fabric.Rect({

Add animation between two objects in Fabric js

由 核能气质少年 提交于 2019-12-07 05:34:26
问题 I have a very basic application that let's you create shapes and connect them with a line. To do that you would do the following. Example 1. Click new animation 2. add rectangle 3. add child 4. add circle You can move the shapes around , drag, and resize. I was wondering if it is possible to add a animation between two objects. So for example a small round circle ball would animate on the line between two objects. I have checked out demos on animation page in fabric js but not sure if it is

Editor Text Fabricjs - IText format letters and simultaneous selection textDecoration

由 不打扰是莪最后的温柔 提交于 2019-12-07 05:12:20
问题 https://jsfiddle.net/gislef/Lvfpq57h/ To make this editor I took as a basis the kitchensink text editor, I consulted the fabric js documentation about IText and saw some isolated examples in Jsfiddle. I have two questions: How do I select letters and format only that was selected within the text? How do I get to select the three options simultaneously the text decoration: underline, line-through and overline? Current code: radios5 = document.getElementsByName("fonttype"); // wijzig naar

Fabric.js - Draw regular octagon

由 心不动则不痛 提交于 2019-12-07 03:48:25
I am using Fabric.js and I have the following code for drawing a hexagon: makeObject(originPoint, newPoint, canvasObject, properties) { let width = Math.abs(newPoint.x - originPoint.x); let height = 0; if(this.shouldKeepProportion){ height=width; }else{ height=Math.abs(newPoint.y - originPoint.y); } width = (this.minWidth!=null && width<this.minWidth ? this.minWidth: width); height = (this.minHeight!=null && height<this.minHeight ? this.minHeight : height); let sweep=Math.PI*2/6; let points=[]; //generate points for 6 angles for(let i=0;i<6;i++){ let x=width*Math.cos(i*sweep); let y=height

Pushing D3.js output through fabric.js for IE8 support?

由 这一生的挚爱 提交于 2019-12-07 01:52:00
问题 I'm evaluating Fabric.js as an alternative to Raphael.js for creating interactive visualisations that are compatible with IE8, which doesn't support SVG or canvas (IE8 support is non-negotiable unfortunately). Raphael can be made to work with the visualisation library D3.js - which outputs SVG and is incompatible with IE8 - via the bridging library D34Raphael, a fork of D3 adapted for use with Raphael. D34Raphael adapts some (but not all) D3 features to output into Raphael's abstracted

How to create an Editable Text which is curved along a Path in Fabricjs?

由 萝らか妹 提交于 2019-12-07 01:18:29
I want to make Editable Text which is curved along a fabric.Path as bellow expected image. Here is my code: I created a curved fabric.Path & a fabric.TextBox, but I don't know how to curve text along that Path. Please help me resolve this problem. var canvasObject = document.getElementById("editorCanvas"); // set canvas equal size with div $(canvasObject).width($("#canvasContainer").width()); $(canvasObject).height($("#canvasContainer").height()); var canvas = new fabric.Canvas('editorCanvas', { selectionLineWidth: 2, width: $("#canvasContainer").width(), height: $("#canvasContainer").height()

clipping image to image using canvas

由 老子叫甜甜 提交于 2019-12-06 19:49:38
Has anyone here have done clipping an image within an image? I've seen so far about clipping on the canvas but are all regular shapes(rectangle, circle, etc...). It would be nice if some have actually done it. P.S. with fabric.js or just the regular canvas. Sure, you can use compositing to draw a second image only where the first image exists: ctx.drawImage(image1,0,0); // this creates the 'mask' ctx.globalCompositeOperation='source-in'; ctx.drawImage(image2,0,0); // this image only draws inside the mask Illustration: House image drawn first and second Grass image is drawn only where house

Get the canvas object while using fabric js

由 橙三吉。 提交于 2019-12-06 18:01:32
问题 I'm using Fabric.js and I've created a fabric canvas object at one place. var x = new fabric.Canvas("mycanvas"); Now at another place, I want to access this object where 'x' won't be available. So how can I get the same fabric canvas object. I don't wanna change the scope of x or pass x as arg. Also, how to get the toDataURL from the fabric canvas object? 回答1: Assuming that mycanvas is the ID of a Canvas element, you could store the reference to the fabric object on the Canvas element itself:

Fabricjs mask object with transformation

由 こ雲淡風輕ζ 提交于 2019-12-06 17:58:43
问题 I'm trying to mask an object using Fabric.js free drawing brush. It works fine if the object is in its default position and without any transformations. But once I add transformations to the object, the mask is placed in the wrong position. I'm not sure how to solve this. Can someone take a look? I want to be able to apply any transformations, before or after the mask, without messing up the mask. let canvas = new fabric.Canvas("canvas", { backgroundColor: "lightgray", width: 1280, height:
订阅 fabricjs