fabricjs

Lasso tool in html5 canvas

由 喜欢而已 提交于 2019-11-28 01:24:58
问题 I'm trying to build a freeform lasso tool to clip an image inside canvas. I'm using fabric.js to draw the shape. var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); var img = document.createElement('IMG'); img.onload = function() { var OwnCanv = new fabric.Canvas('c', { isDrawingMode: true }); OwnCanv.freeDrawingBrush.color = "purple" OwnCanv.freeDrawingBrush.width = 4 ctx.clip(); ctx.drawImage(img, 0, 0); } img.src = "http://upload.wikimedia.org/wikipedia/commons/3

Fabric.js subclassing fabric.Group - Error: “Cannot read property 'async' of undefined” when load from JSON

由 好久不见. 提交于 2019-11-28 01:09:21
问题 Have the following issue: Trying to subclass fabric.Group: var CustomGroup = fabric.util.createClass(fabric.Group, { type : 'customGroup', initialize : function(objects, options) { options || ( options = { }); this.callSuper('initialize', objects, options); this.set('customAttribute', options.customAttribute || 'undefinedCustomAttribute'); }, toObject : function() { return fabric.util.object.extend(this.callSuper('toObject'), { customAttribute : this.get('customAttribute') }); }, _render :

Textbox of Fabric.js does not wrap a long word

由 半腔热情 提交于 2019-11-28 00:54:51
问题 I am using the Textbox of Fabric.js . I have given a fixed width. But if a user types a long word without any space that exceeds the given width of textbox, it does not wrap. Any solution? 回答1: Yes there is a solution that you may like or not to implement word breaking: override the fabric default function for line breaking: fabric.Textbox.prototype._wrapLine = function(ctx, text, lineIndex) { var lineWidth = 0, lines = [], line = '', words = text.split(' '), word = '', letter = '', offset =

Add image from user computer to canvas

由 蓝咒 提交于 2019-11-27 23:56:48
i'm working on a web app that allow users to create dynamic slideshow. Currently i've got an issue regardless how to add image from the computer's user to the canvas. I'm using a input button to get the file from the computer and it appeal a function who will add the image to the canvas. So far i've tried different ways to add the image to the canvas as well as this one : Dynamically add image to canvas But the code showing here doesnt work in my case, because it just draw the image into the canvas but it wont allow it to be draggable and resizable just like the Kitchensink.js demo from

Canvas coordinates in Fabric.js have offset

由 我的未来我决定 提交于 2019-11-27 21:03:30
问题 I just started with fabric.js and I have a (probably beginner) error: I am using fabric with jquery with the following code: $(document).ready(function () { canvas = new fabric.StaticCanvas('scroller'); canvas.add( new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' }) ); }); This code should draw a 140x100 Rectangle on the canvas. Sadly, only a quarter of the Rectangle appears. If I change the top and left values to higher numbers, more of the Rectangle appears on the

Adding canvas inside another canvas: obj.setCoords is not a function( fabric js)

由 与世无争的帅哥 提交于 2019-11-27 19:22:33
问题 Started using fabric.js and trying to add a canvas inside another canvas, so that the top canvas stays constant and I'll add objects to inner canvas. Here is the snippet of adding a canvas to another canvas. canvas = new fabric.Canvas('artcanvas'); innerCanvas = new fabric.Canvas("innerCanvas"); canvas.add(innerCanvas); and my html looks like this <canvas id="artcanvas" width="500" height="500"></canvas> <canvas id="innerCanvas" width="200" height="200" ></canvas> Once adding these

Animated GIF on Fabric.js Canvas

由 扶醉桌前 提交于 2019-11-27 16:55:47
问题 I'm working on a project where I've been asked to support animated GIF on a fabric.js canvas. As per https://github.com/kangax/fabric.js/issues/560, I've followed the advice to render on regular intervals, using fabric.util.requestAnimFrame. Video renders just fine with this method, but GIFs don't seem to update. var canvas = new fabric.StaticCanvas(document.getElementById('stage')); fabric.util.requestAnimFrame(function render() { canvas.renderAll(); fabric.util.requestAnimFrame(render); });

Using stateProperties and hasStateChanged to implement undo / redo in fabric.js

由 自古美人都是妖i 提交于 2019-11-27 16:49:29
问题 Edit: The scope of this question has shifted a bit. Please see updates below. I've been working on an undo/redo of sorts for fabric.js (see fiddle). Though rather naive, it's working for the most part (for adding / removing / moving or resizing individual objects or adding / removing groups of objects), but not for moving or resizing groups of objects. In the fiddle, note console output from onObjectSelected() function. To see what i mean, draw some objects on the fiddle canvas, and move or

Fit the background image to canvas size with Fabric js

由 一曲冷凌霜 提交于 2019-11-27 15:24:35
I am trying to stretch the background image so it can fit the canvas size. But its not working. I have followed this question and based on comment i have implemented the stretching code. Strech the background image to canvas size with Fabric.js http://fabricjs.com/docs/fabric.Canvas.html#setBackgroundImage Code $(function () { var canvas1 = new fabric.Canvas('canvas1'); //Default var canvas = canvas1; //Change background using Image document.getElementById('bg_image').addEventListener('change', function (e) { canvas.setBackgroundColor('', canvas.renderAll.bind(canvas)); canvas

Fabric.js Clip Canvas (or object group) To Polygon

由 怎甘沉沦 提交于 2019-11-27 13:47:47
I have a canvas drawn in Fabric.js that i am adding a group of rectangles to, i want to limit the edges of those rectangles as a group to not go outside a certain area. Imagine making a stripy t-shirt, the stripes are make by using a series of rectangles and i need to keep them to the shape of the t-shirt. I think its better to clip the entire canvas to the shape of the t shirt, so anything i add to it remains within the t-shirt but i am stuck. So far i am only clip to basic circles and rectangles. Thanks kangax You can just render a shape inside canvas.clipTo :) I just loaded a random SVG
订阅 fabricjs