fabricjs

i want to use caman js and fabric js to give effect on an image in same canvas. how can i combine them?

由 这一生的挚爱 提交于 2019-12-14 03:52:14
问题 I want to give effect to image using both caman js and fabric js. I tried to combine the code but it gives two images instead of one. What can i do to combine caman js and fabric js and fix this? I reffered to: http://camanjs.com/ and http://fabricjs.com/articles/ Thank you. 回答1: I don't think there is a direct way to combine fabric and caman. Here is a workaround that i have used (Just a simple one. You can enhance it as per your wish) : HTML <canvas id="canvas" width="600" height="300"><

Load SVG from file to canvas and ungroup it

由 放肆的年华 提交于 2019-12-14 03:49:52
问题 I upload an SVG file to a canvas using FabricJS with the function fabric.loadSVGFromURL (url, function(objects, options){ group = fabric.util.groupSVGElements(objects, options); canvas.add(group).centerObject(group).renderAll(); }); This works perfectly. However the next step I want do is to ungroup the recently added group. The reason why I need to ungroup is that I want to be able to select the group's child elements by clicking on them since there is no access to these elements if they are

fabricjs clipTo is not working

由 青春壹個敷衍的年華 提交于 2019-12-14 02:23:03
问题 I have a simple script like: fabric.Image.fromURL(url, function(oImg) { oImg.set({selectable:false}) oImg.clipTo = function(ctx) { console.log("ctx") console.log(ctx) } }) Here clipTo function is not called. I want to clip oImg but clipTo is not called. What is wrong in here ? 回答1: Gamer, Here is working code: var canvas = new fabric.Canvas('c1'); var src = "http://fabricjs.com/lib/pug.jpg"; canvas.backgroundColor = "#333"; var object; fabric.util.loadImage(src, function (img) { object = new

how to display size on shape after scaled using fabric js?

由 ↘锁芯ラ 提交于 2019-12-13 23:05:56
问题 I am working on canvas using fabric js library.i am not able to display size of scaled shape. i want to draw shape like : i have try and it display ractangle with text but i have more than one ractangle and i want to display size on all after they get scaled : var rect1 = new fabric.Rect({ left: 100, top: 50, width: 200, height: 100, fill: 'white', stroke: '#ccc', bringToFront: true }); var t = new fabric.IText("200", { top:110, left: 100, width: 50, height:50, backgroundColor: '#FFFFFF',

Enable and disable mouse events for canvas using Fabric.js

由 笑着哭i 提交于 2019-12-13 15:15:46
问题 I am using Fabric.js to draw rectangles on a canvas. After drawing a rectangle, I want to disable all events on that object. I have tried to do it using canvas.__eventListeners["mouse:down"] = []; but then after the object selection is cleared, the canvas can't apply any events. <html lang="en" > <head> <meta charset="utf-8" /> <title>HTML5 canvas - Image color picker | Script Tutorials</title> <link href="index.css" rel="stylesheet" type="text/css" /> <script src="https://cdnjs.cloudflare

Elements on the canvas disappear w/ jsfiddle

由 丶灬走出姿态 提交于 2019-12-13 05:51:57
问题 I have a problem using fabric.js in canvas. After resize with scale factor at 5x, clicking in ZoomIn 2 times, the elements on the canvas disappear. Please look: http://jsfiddle.net/ptCoder/Q3TMA/90/ Canvas size (just for example): <canvas id="c" width="400" height="400"></canvas> Zoom Scale Factor: var SCALE_FACTOR = 5; Is there any solution? Thank You. 回答1: The problem is that you are also resizing the canvas, so after zooming 2 times, its size is 10000px * 10000px, meaning 100 megapixels,

loading stickman from json does not persist line coordinate rotation logic

由 梦想的初衷 提交于 2019-12-13 05:37:47
问题 After loading stickman.tojson, the circles and line rotation logic is gone. I was able to duplicate the stickman logic to add lines to objects and the line will rotate and follow the object as I move it. I used canvas.toJSON to save the Json and all of this works fine. I can load the Json with canvas.loadFromJSON(json) and it loads fine. The issue is after I load it, when I move the circles, the line does not follow and rotate. I tried searching for properties to include in the toJSON() but I

Fabricjs extend class

由 ぐ巨炮叔叔 提交于 2019-12-13 05:24:47
问题 I've created a custom class with fabric.js var Container = fabric.util.createClass(fabric.Rect, { type: 'Container', initialize: function(options) { this.placedColor = 'rgba(211,211,211, 1)'; this.virtualModeColor = 'rgba(211,211,211, 0.5)'; this.setToVirtualMode(); options || (options = { }); this.callSuper('initialize', options); this.set({ label : options.label || '', 'top' : options.top || 0, 'left': options.left || 0, 'height' : options.height || 50, 'fill' : options.fill || this

FabricJs 1.7.18 scaleToWidth() not setting the given width

由 a 夏天 提交于 2019-12-13 04:22:15
问题 As per this answer I have built fabricJs version 1.7.18 with all features enabled - Built output file. I am using the following code to change an object's width and height using scaleToWidth(), but the new width value is not set properly. It is setting the width with some other value. var obj = canvas.getActiveObject(); obj.scaleX = 1; obj.scaleY = 1; obj.scaleToWidth(65); obj.setCoords(); canvas.renderAll(); //This gives a different width value console.log(obj.getWidth()); Can anyone help me

How to use text-anchor : middle in fabric js

由 人走茶凉 提交于 2019-12-13 04:12:28
问题 I have created svg from fabric js. While creating card i have applied text-align to object using below code: activeObj.set({ textAlign : 'center', }); canvas.renderAll(); So my svg is look like below: https://codepen.io/dhavalsisodiya/pen/BrRbRG Now when i changed my {company_address} address variable with original value, that text should be align center but it is not. https://codepen.io/dhavalsisodiya/pen/VXbRzy Then i have modified SVG manually, I have added text-anchor="middle" in tspan
订阅 fabricjs