fabricjs

Fabricjs build 1.7.15 with gesture support

由 ぃ、小莉子 提交于 2019-12-01 01:59:20
I've been working on a project with fabricjs. Great library, but I ran into a stupid problem which I can't seem to solve. I've been working with version 1.7.15 and prefer to stick to the stable version for now instead of upgrading to version 2.0.beta. I've used a fabricjs version without gestures support so far, but now I would like to include the gesture support. Where can I build a version of fabricjs ^1.7 with gesture support now? Since the custom build on the site of fabricjs only seem to work with 2.0.beta. Hope you can help out! Thanks in advance :) Actually the only way to build it is

how to rotate around one specified point in fabric.js?

由 …衆ロ難τιáo~ 提交于 2019-12-01 01:09:51
问题 Could anybody know how to rotate around one specified point in fabric.js? For example, var line1 = new fabric.Line([70, 20, 70, 100], { stroke: "#000000", strokeWidth: 6 }); I would like to rotate it based on its end point(70, 100) but not its center. 回答1: You can achieve a rotation about an arbitrary point using fabric.util.rotatePoint . This will let you rotate a line (defined by x1 , y1 , x2 and y2 ) about an origin (defined by origin_x and origin_y ) by an angle in degrees (defined by

FabricJS - disable layer index changing when object is selected

由 拥有回忆 提交于 2019-12-01 00:35:24
问题 I've a problem with my FabricJS app. By default, the object layer in fabricjs jumps to the top when I select it. I want to disable this option so that the index of the active element not changing. It's possible ? 回答1: You just need to set the preserveObjectStacking options as shown in the below code when setting up the canvas. var fabricCanvas = new fabric.Canvas("t", { preserveObjectStacking: true }); fabricCanvas .add(new fabric.Rect({ top: 0, left: 0, width: 100, height: 100, fill: "green"

Deserialize a JSON object in Fabric.js

由 ▼魔方 西西 提交于 2019-11-30 22:49:30
问题 I am developping a collaborative whiteboard using fabricjs. When a user creates a new fabric object , I serialize it and send it to all other users. var rect = new fabric.Rect(); canvas.add(rect); socket.emit("newObject", JSON.stringify(rect)); // sends the object to other users When those users receive the serialized object, it should be deserialized and added to their canvas. What is the best way to do this? I was not able to find a function that deserializes a single object, only the whole

CORS issue when using fabric.fromUrl

由 限于喜欢 提交于 2019-11-30 20:43:49
问题 I am integrating fabricjs with angularjs application. I am pulling an image from a third party source (which is not in my control). I wish to perform some actions on it like: filtering, adding to canvas, storing to canvas and reloading from canvas. I am using fabric fromurl call with crossorigin but it fails everytime. fabric.Image.fromURL('http://img.fkcdn.com/image/dining-chair/b/g/y/fidcbennywncsach-1-cedar-pine-devdar-home-cherry-white-original-imae9fsfbkxrgebt.jpeg', function (img) {

Add background image with fabric.js

由 ε祈祈猫儿з 提交于 2019-11-30 20:38:56
问题 I'm able to add images by using an input type="file" id="file" however would like to be able upload an image that can be moved and stay behind all else as a background image. Right now I can add something and send it to the back but moving it is difficult because the controls run off the canvas. Any help would be greatly appreciated—thanks in advance. // Add image from local var canvas = new fabric.Canvas('c'); // display/hide text controls canvas.on('object:selected', function(e) { if (e

Find the coordinates of the corners of a rotated object in fabricjs

由 我的梦境 提交于 2019-11-30 17:52:33
Suppose I have an image in a fabricjs canvas. I can easily calculate the coordinates of the corners based on the image's top & left values, and its size. How can I do so when the image is rotated by any degree? Example: EDIT: Preferably without the use of trigonometry, if there is a simpler method implemented in fabricjs itself or somewhere else. kangax Yes, of course. We store those coordinates in object's oCoords oCoords.tl.x, oCoords.tl.y // top left corner oCoords.tr.x, oCoords.tr.y // top right corner oCoords.bl.x, oCoords.bl.y // bottom left corner oCoords.br.x, oCoords.br.y // bottom

How can i change the rotation icon in fabricjs

由 一笑奈何 提交于 2019-11-30 15:46:09
Please guide me to modify Fabricjs to add custom icon for Rotation. I get some of the answers but it is not working fine. Please let me know the code to change a particular rotation icon only. For fabricjs above 1.6.6 changing function object prototype drawControls, small changes on hasRotation condition, result can be seen this JSFidle fabric.Object.prototype.drawControls = function (ctx) { if (!this.hasControls) { return this; } var wh = this._calculateCurrentDimensions(), width = wh.x, height = wh.y, scaleOffset = this.cornerSize, left = -(width + scaleOffset) / 2, top = -(height +

Rect with stroke, the stroke line is mis-transformed when scaled

由 与世无争的帅哥 提交于 2019-11-30 14:41:39
I have got a lot of helps from this site and contributors here, thanks. Now I have a question about the Rectangle in Fabric.js with stroke, as I used it as kind of placeholder for images and text, when I scaled it, the border line width is scaled too, I think it's kind a problem as I want to keep the border width not changed. var canvas = new fabric.Canvas("c1"); var el = new fabric.Rect({ originX: "left", originY: "top", left: 5, top: 5, stroke: "#ccc", strokWidth: 1, fill: 'transparent', opacity: 1, width: 200, height: 200, cornerSize: 6 }); canvas.add (el); canvas.renderAll (); See example

FabricJS canvas is “stuck” after adding elements

由 被刻印的时光 ゝ 提交于 2019-11-30 14:18:48
I'm creating an application using fabric.js , and experiencing really strange behavior. I'm adding both images and text instances, using the regular fabric.Canvas (not fabric.StaticCanvas ), and am unable to move or resize these items after addition. I've only added a couple of each type. The basic functionality is wrapped in a callback tied to a click event on some button, but the core fabric functionality looks something like this (simplified, but almost everything is the same as far as fabric related code): <canvas id="myCanvas" height=600 width=800></canvas> <input id="addStuff" type=
订阅 fabricjs