fabricjs

Fabric.js flipX and flipY don't seem to work

由 感情迁移 提交于 2019-12-23 05:32:14
问题 I can't flip a rectangle to save my life in Fabric.js, even using the code straight from the tutorials here - http://fabricjs.com/fabric-intro-part-1/#objects. If someone could please take a look at this fiddle and let me know what I'm doing wrong, I'd greatly appreciate it. http://jsfiddle.net/thardy/E4Vcr/ rect.set('angle', 15).set('flipY', true); // doesn't work canvas.renderAll(); // this wasn't in the tutorial, but I'm pretty sure it's needed Is this a bug in v1.4.0? 回答1: This appears to

Uploaded image display with background image after click on button from canvas HTML5

由 一个人想着一个人 提交于 2019-12-23 05:17:07
问题 I am using HTML5 and fabric js. I am taking tow background images and upload image on this background image. But when i am converting canvas into image then only uploaded image come. I will show you screen shot. After click on submit button: In second screen shot only uploaded image will come. But i want uploaded image should be come with background image. CODE: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit

Animate Fabric js using GSAP?

由 不想你离开。 提交于 2019-12-23 04:54:25
问题 I have been playing with the Fabric.js library for a little while. What like about it is the ease of transforming objects and a couple more. I am wondering if there is a plugin or any way to animate Fabric elements using GSAP? 回答1: It can be done by passing the fabric objects into the GSAP const tl = new TimelineLite(); tl.staggerFromTo( [fabricObject], 1, {left: -config.width}, {left: config.width, onUpdate: () => canvas.renderAll()}, 0.4); 来源： https://stackoverflow.com/questions/46324061

Load custom font for Fabric.js

由 独自空忆成欢 提交于 2019-12-23 04:53:19
问题 I'm looking to add an Open-Type Font to my Fabric.js app. I found this question, Custom font in Pixi.js, pretty much asking the same thing. How can we load a font from our file system? I tried using CSS @font-face as well. 回答1: The answer was found on this question and the one linked above. It seems I had some spelling issues with my code in relation to my filename. So to be clear, the correct answer is to use CSS font face like: @font-face { font-family: test-family; src: url('path/to

Can i use fabric.js and three.js in the same canvas?

由 时光怂恿深爱的人放手 提交于 2019-12-23 04:45:07
问题 Is it possible to use three.js for 3d drawing and add to fabric.js for 2d drawing to the same canvas? I just like the way fabric.js handles manipulation and would like to make use of it. Before I start to experiment, I'm wondering if any one has tried this? Is it possible? 回答1: An alternative approach is to use FabricJS with an off-screen canvas, then use that canvas as a texture (image) source for your on-screen WebGL/tree.js canvas and the polygon you are rendering there. Is it possible to

Multiple canvases (pages) in Fabric.js

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-23 03:58:12
问题 I am trying to create multiple pages as canvases using Fabric.js on click of a button - e.g. every time the button is clicked a new page is created. The problem I'm having is that I want these canvases to use the same functions which are created at when the page is loaded and are only assigned to the initial canvas. Is there a way to create instances of the canvas and still use those same functions? 回答1: My understanding of your question is that you are creating multiple canvases within a

Fabric.js - Draw regular octagon

由 隐身守侯 提交于 2019-12-23 03:55:14
问题 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=[

Add image from user computer to canvas with style

由 穿精又带淫゛_ 提交于 2019-12-23 03:47:23
问题 I'm playing a lot with fabric.js. I read here how to add my own images. How would I do this but give each uploaded photo a certain style? In other words, I'd like each picture uploaded to have a border or stroke to look like this: . The code I'm playing with: var canvas = new fabric.Canvas('canvas'); document.getElementById('file').addEventListener("change", function(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function(f) { var data = f.target.result;

How to zoom all elements pof canvas with one click?

由 若如初见. 提交于 2019-12-23 03:33:11
问题 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. 回答1: 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

Raycast mouse clicks from Threejs model to the Fabricjs canvas used for the texture

由 三世轮回 提交于 2019-12-23 03:06:36
问题 I'm creating a 3D product configurator. First , I load the .gltf model and render it with Threejs. Then , I print a svg to a Fabricjs canvas and use that canvas to make a THREE.CanvasTexture and update the model with this canvas. The problem I allow people to upload text and images. Those images are added to the Fabric canvas as new objects. While the main svg is locked at the background, these uploaded images can be dragged and resized in the canvas. Screenshot canvas object Goal So my goal
订阅 fabricjs