fabricjs | 易学教程

load fabric js in angular application

阅读更多关于 load fabric js in angular application

问题 So i downloaded and installed fabricjs using bower inside of my angular application and i am having trouble loading it up. I have the following on top of my app.js file. Everything else loads fine except fabric angular .module('myApp', [ 'flow', 'fabric', 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch', 'ui.bootstrap', 'ui.router', 'controllers.main', ]) .config( function ($stateProvider, $httpProvider, flowFactoryProvider ) { When i load the page i get the

Unable to maintain thickness of strokeWidth while resizing in case of Groups in Fabricjs

阅读更多关于 Unable to maintain thickness of strokeWidth while resizing in case of Groups in Fabricjs

问题 I am writing code to maintain same strokeWidth across all the objects in Fabricjs. I am able to successfully maintain strokeWidth for normal Objects , let it be rectangle or ellipse(I wrote code to maintain both). But when I use group , I am unable to maintain the strokeWidth. Here's the fiddle. Steps to reproduce the issue ? 1)Open above fiddle link 2)resize the circle , check the size of border ( thickness of border remains the same on re-sizing ) 3)Now resize the rectangle and text(group)

Resizing Objects in Fabric.js

阅读更多关于 Resizing Objects in Fabric.js

问题 I'm planning on using Frabic.js to build a room layout. It's based around a grid layout (grid size: 25) with the objects snapping into position. I'm trying to override resize events to make the width a multiple of the grid size (25). However it seems to be randomly resizing the the element. Code var canvas = new fabric.Canvas('section', { selection: true }); fabric.Object.prototype.transparentCorners = false; var canvasWidth = 600; var canvasGrid = 25; canvas.on('object:modified', function

Maintaining object size while zooming in fabric js

阅读更多关于 Maintaining object size while zooming in fabric js

问题 Is there any solution for maintaining object size even if the user zoom in or out? I want to achieve like on the google maps behavior. So if I have an object (group of object) with a height and width of 20 even if I zoom into it, it should still be 20 pixels by default. Right now the behavior I have is that when the user zoom in or out the image gets bigger / smaller. I also did looping all the objects that I have on the canvas then set the scaleX and scaleY for it but the result was so laggy

Exclude element from canvas to be saved to json (fabric.js)

阅读更多关于 Exclude element from canvas to be saved to json (fabric.js)

问题 I am using var jsonToPHP= JSON.stringify(canvas.toObject(['id','name'])); to save all from canvas to JSON. I am also adding background image to canvas. document.getElementById('imgLoader').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 0, top: 0, angle: 00,width:canvas.width, height:canvas.height,}).scale(1);

FabricJS Touch Pan/Zoom Entire Canvas

阅读更多关于 FabricJS Touch Pan/Zoom Entire Canvas

问题 I need to enable touch zoom/panning on a FabricJS canvas. There are libraries that will allow this behavior on an image (see pinch-zoom-canvas) or via mouse-click events (see this Fiddle) but I can't seem to get the 'touch:gesture' events hooked up properly. I've built the library with gestures enabled (so this FabricJS demo works locally for me), but I don't know where to start with combining the gestures with the working fiddle. I tried variations of code like this: canvas.on({ 'touch

Save canvas to image with all its object and back to canvas with all objects back for editing them

阅读更多关于 Save canvas to image with all its object and back to canvas with all objects back for editing them

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. You can save canvas as JSON and then can load it back from JSON var myJson = JSON.stringify(canvas.toJSON(['left', 'top', 'lockMovementX', 'lockMovementY'])); canvas.loadFromJSON(myJson, function () { //render the canvas canvas.renderAll(); }); if i am not mistaken

Fabric js extending toObject with custom properties, loses default ones

阅读更多关于 Fabric js extending toObject with custom properties, loses default ones

问题 Befor posting this I've been looking up in here as in many other places, but I can get to have this working fully. All I need is to be able to save some custom properties in all the shapes. The properties are : uuid, and rt_attributes. Therefore, as by manual I added this code : fabric.Object.prototype.toObject = (function(toObject) { console.log(toObject) return function() { return fabric.util.object.extend(toObject.call(this), { uuid: this.uuid, rt_attributes: this.rt_attributes }); }; })

Load from JSON with dynamic patterns

阅读更多关于 Load from JSON with dynamic patterns

问题 I am trying to save Fabric.js canvas and reload it using loadFromJson . But I am getting error patternSourceCanvas is not defined. I thought I should make it global so I removed var. But when I fill the some other new shape with new pattern, this new pattern is applied to all the previously drawn shapes which have old patterns on the canvas. Kindly help me with dynamic patterns. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Dynamic

How to convert canvas to SVG with embedded image base64 in fabricjs

阅读更多关于 How to convert canvas to SVG with embedded image base64 in fabricjs

问题 I have fabricjs canvas with image, which I loaded by fabric.Image.fromURL() method. I need export it to SVG, but I want to export image as embedded source in base64, not as a link. How can I do it? Is it any way to load image as a source not as a link? Example code: Loading image: fabric.Image.fromURL('./assets/people.jpg', function (image) { image.set({ left: 10, top: 30 }); canvas.add(image); }; Exporting to SVG: canvas.toSVG(); In exported SVG I have: <image xlink:href="http://localhost