fabricjs

问题 Im trying to create a rope in Fabric. Everything worked fine when it was a straight rope, but if i make it curves a little bit, it becomes like this http://i.stack.imgur.com/EZeSb.png i lost a part of my rope pattern when it curved. So i tried to split it to multiple small rectangles, and add the pattern to all of those, but it doesnt look natural, all the rectangles in a messy coordinate system. So is there anyway to create a normal curve rope ? thank you! 回答1: Yes you can, but its quite

问题 Closed . This question needs details or clarity. It is not currently accepting answers. Want to improve this question? Add details and clarify the problem by editing this post. Closed 6 years ago . I only would like to inform you that you forgot to set originX and originY to center. I copied the latest version and noticed that all my objects are moved. I set the origin to center and then everything looks like before. In the doc default value is also center. 回答1: This was a latest change :

问题 I'm using a Threejs canvas to render a 3d model and another (this one hidden) Fabricjs canvas to apply as a texture. I achieved to transform the 3d coords from the threejs canvas to the 2d canvas. Now what i need is to "replicate" or "emit" the click and drag events from the 3d canvas to the hidden 2d one as suggested in a comment from this question. I made a codepen with my progres. If you click the left canvas a dot will spawn in the same coords but in 2d canvas. I need to be able to click

问题 I'm having some issues trying to get the objects to resize according to the grid size. Here's my fiddle: http://jsfiddle.net/csh6c6fw/1/ this is the code that I'm applying: canvas.on('object:scaling', (options) => { var newWidth = (Math.round(options.target.getWidth() / grid)) * grid; var newHeight = (Math.round(options.target.getHeight() / grid)) * grid; if (options.target.getWidth() !== newWidth) { options.target.set({ width: newWidth, height: newHeight }); } }); Expected Result It's

问题 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'

问题 I am using fabrics JS for adding objects on canvas and then saving it in form of image. Now i want bring the image back to edit mode inside canvas. You can get detailed idea about it at http://www.13thandmars.com/logo_studio/builder.html?project_id=17b36372c43c04044dd804454dfdf6e8 Add text will add an object to tshirt in above link. 回答1: You can save canvas as JSON and then can load it back from JSON var myJson = JSON.stringify(canvas.toJSON(['left', 'top', 'lockMovementX', 'lockMovementY']))

问题 I'm trying to set fabric up so the origin is bottom left instead of top left. Currently I'm using setViewportTransform and it transforms everything as I want, except for the selection box. (doesn't seem to get the transformation) I made a fiddle & you can see how if you rotate the rectangle, the selection box rotates the wrong way. So my question is, how do I set fabric.js' origin to the bottom left? http://jsfiddle.net/39up3jcm/105/ 回答1: The simplest solution I found was to: Change the view

问题 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

问题 I need to display a large canvas as a smaller one for the purposes of good user interaction, but uploading a large canvas later. I am using Fabric.js and am trying the Canvas css trick where you set the width/height for the canvas in HTML and then set it via CSS to smaller one as documented here: fabric.js resize canvas to fit screen When I attempt to resize as follows, it makes the canvas 300x150 (default canvas) and doesn't respect my CSS. HTML: <canvas id="c"></canvas> JavaScript: var

问题 I am using fabric.js . I am uploading multiple image in canvas. After uploading the image. Then canvas is converting into image by toDataURL() . I want to paste this converted image on a T-Shirt having size of 2000x2000 . But this image is of small size and when I try to increase its size it is getting blurred due to stretching I need image of same size what user has uploaded, instead of a scaled up version from a scaled down image. E.g, if user uploaded an image of size 1500x1500 then from