fabricjs | 易学教程

Programmatically select object in a Fabricjs canvas from coords

阅读更多关于 Programmatically select object in a Fabricjs canvas from coords

I've been stuck with this for so long now. I'm using a Fabricjs canvas as a texture for a 3D model in Three.js. The model renders the canvas as a texture every time there's a change on it. I would like to click on the model and programmatically select an item on the Fabricjs canvas. I achieved to transform the 3d coords to the Fabric 2D coords with a raycaster, so I can add new items to the canvas clicking directly on the model. But I can't find the way to select a canvas object clicking on the model because there's no "getObjectFromCoords" or similar method on Fabricjs Is there any way to

Canvas/Fabric.js .loadFromJSON() replaces entire canvas

阅读更多关于 Canvas/Fabric.js .loadFromJSON() replaces entire canvas

I have 2 JSON objects: jSONObject1 {"type":"group","originX":"left","originY":"top","left":0,"top":0,"objects": [{"type":"line","stroke":"grey","x1":430,"x2":20.0,"y1":430,"y2":430}, {"type":"line","stroke":"grey","x1":430,"x2":20.0,"y1":20.0,"y2":20.0}, {"type":"line","stroke":"grey","x1":430,"x2":430,"y1":20.0,"y2":430}, {"type":"line","stroke":"grey","x1":20.0,"x2":20.0,"y1":430,"y2":20.0}]} contains an array of lines to be drawn on the canvas that make up a building floorplan jSONObject2 {"type":"group","originX":"left","originY":"top","left":0,"top":0, "objects":[{"type":"rect","originX":

Preserve original quality of image on canvas

阅读更多关于 Preserve original quality of image on canvas

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 canvas I need image of size 2000x2500 only instead of 400x400 . I have seen 99Thsirts.com website but I

Maintain strokeWidth while scaling in fabric js

阅读更多关于 Maintain strokeWidth while scaling in fabric js

问题 Note: I have refereed SO question, but it is not useful for my case, because 1) I am trying to maintain previous border but as of now its recalculate border while scaling. I have added below code to stop increasing border automatically while scaling the object. Now the issue is I have added a 5px border to object but when scaling the object then it is not maintaining the border which I added earlier. canvas.on('object:scaling', (e) => { var o = e.target; if (!o.strokeWidthUnscaled && o

Fabricjs: Show horizontal and vertical position line on drag

阅读更多关于 Fabricjs: Show horizontal and vertical position line on drag

I am using fabricjs 1.5 and I am stuck on on thing. I want to show the dotted lines horizontally and vertically whenever I start to drag my object. Purpose of these lines is to give some idea to the user that where is the object with respect to the canvas and other objects. I have searched on many websites and could not find any solution or even any reference related to this problem and hence I could not start anything. It would be great help if someone can put me in right direction. Thanks. centering_guidelines , you can use this library to draw center lines. aligning_guidelines this for

fabric.js Offset Solution

阅读更多关于 fabric.js Offset Solution

问题 In dealing with offset with fabric.js - what is the best approach? I'm basically allowing a user to draw a box, and I want to make sure I have the box drawn at the exact start and ending coordinates of the dragging action. http://jsfiddle.net/mojo5000/P7gAC/4/ ... left: x + width/2 - 8, top: y + height/2 - 8, ... I basically had to a little rigging with the left and top values. It seems to work. Is there a better way to do this? 回答1: You have not factored in the positioning of the canvas

Setting freedrawcolor with Spectrum Color Picker

阅读更多关于 Setting freedrawcolor with Spectrum Color Picker

问题 I've got a fabricjs canvas initiated with a color picker toggled via a button. I'd like to set the freedrawcolor with this but haven't had any luck. Here's what I'm working with now: https://jsfiddle.net/code4ever/7djLqobh/ var canvas = window._canvas = new fabric.Canvas('canvas', { isDrawingMode: true, }); $("#toggle").spectrum({ showPaletteOnly: true, showPalette: true, color: 'black', hideAfterPaletteSelect: true, palette: [ ['black'], ['blue'], ['red'] ], change: function(selectedColor) {

Unable to add new canvas element with an existing one

阅读更多关于 Unable to add new canvas element with an existing one

问题 I am using 2 canvas elements. I am using one element as a main canvas element which has all the elements. I am generating a barcode in a separate canvas and would like to add it to the main canvas. Trying for a long time. Adding an example here fiddle $(document).ready(function() { JsBarcode('#barcode', "1234", { width: 4, height: 20//displayValue: false }); var bc = document.getElementById("barcode"); var canvasx = bc.getContext("2d"); var img1 = new Image(); img1.src = bc.toDataURL("image

How to get angle,coords and scale of the object by group?

阅读更多关于 How to get angle,coords and scale of the object by group?

问题 in fabricjs,the object's left,top,angle,scaleX and scaleY is different in a group and not in a group.I can get the right attributes based on canvas when a object is not in a group.but once this object is in a group,the left or top or angle I get is based on group. if I rotate a group,the angle of the group has changed but when I use group._objects[i].angle to get the angle of the object,the angle doesn't changed. How to get the canvas-relative position of an object that is in a group? this

Javascript Canvas Blank Image

阅读更多关于 Javascript Canvas Blank Image

问题 I am trying to make a tshirt customizer with FabricJs. Everything is working fine .. I can upload the image and load it into canvas. The image is placed on the tshirt, but if i want to see(or send to server) the canvas image i get a blank image. My code is : document.getElementById('imgLoader').onchange = function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { var imgObj = new Image(); imgObj.src = event.target.result; //imgObj.crossOrigin = 'anonymous'; $(