fabricjs

问题 I am using the HTML5 CANVAS with fabric js. Finally will be converted it into SVG.we can upload images and crop into circle,rectangle,.. .The image also being cropped and added text on it.The problem which i am facing is the images are not being cropped into svg.It shows full images like below.i have tried viewBox also in toSVG .Please suggest me what to do or if i am doing anything wrong. $(function(){ var canvas = new fabric.Canvas('Canvas',{backgroundColor: '#ffffff',preserveObjectStacking

问题 I'm trying to build a state machine kind of flow diagram using Fabric js. So far I'm able to dynamically add shapes and just draw lines between fixed points. I'm stuck at drawing connector lines between shapes by dragging the mouse from one component to another. Is it really possible using FabricJS? if yes, what are the approaches? Can anyone throw some light on this? Here is what I have so far, import { Component } from '@angular/core'; import 'fabric'; declare let fabric; @Component({

问题 I have used fabric.loadSVGFromURL function for loading SVG image to canvas. Most of the images are loading correctly on the canvas but there are some SVG images which are not loading properly on the canvas (half of the SVG is loading as black colored SVG). Following SVG is not loaded properly on canvas: http://dev9.edisbest.com/Bat_B_020.svg Following is the code which I have used: var src ="http://dev9.edisbest.com/Bat_B_020.svg"; fabric.loadSVGFromURL(src, function (objects, options) { var

问题 Using object.on('selected', function() {}), I can get the image object that is clicked. My intent is to redirect to an URL by clicking it. How can I add an URL to an image, or more general, to an object in Fabric.js? 回答1: You can simply navigate to the target page in the selected event handler: object.on('selected', function() { window.location.href = "http://www.example.com/"; }) 来源： https://stackoverflow.com/questions/29585568/how-to-add-url-to-an-image-in-fabric-js

问题 1.I want to add objects dynamically in group, or cloning object dynamically. 2.I have tried but not working in looping. 3.Want to make group of objects present over canvas (which is dragged by user over canvas) <script src="js/fabric.js" type="text/javascript"></script> <canvas id="canvas" class="canvas" ></canvas> <style> .canvas { border: 1px solid Black; width: 1100px; height: 1100px; } </style> <script> var canvas = new fabric.Canvas('canvas'); canvas.setWidth(1100); canvas.setHeight(1100

问题 From reading the documentation for Fabric on ContainsPoint (http://fabricjs.com/docs/symbols/fabric.Canvas.html#containsPoint), it states : Applies one implementation of 'point inside polygon' algorithm Parameters: e { Event } event object target { fabric.Object } object to test against Returns: {Boolean} true if point contains within area of given object So based on this, I'm trying to iterate through all objects within a group and if containsPoint returns true, select the object. But it

问题 I am using fabric js, i use the following function to put an image on canvas, when i click on canvas an image is put on that location, i want to know if there is way that i can check weather there is something already present at location where i am clicking especially if there is another image or not document.getElementById("door").onclick = function () { canvas.on('mouse:down', function (o) { fabric.Image.fromURL('http://localhost:60099/Images/door.png', function (img) { var pointer = canvas

问题 I need a small workspace, but a large output for my FabricJS canvas, as I am converting this to a PNG for print production. I tried the CSS trick where you have a large canvas, but then it appears small. Example: .canvas-container canvas { width: 650px !important; height: 436px !important; border: 1px solid blue; } <div class="col-md-8 hidden-xs hidden-sm canvas-container"> <canvas id="c"></canvas> </div> However, when I try this, it is extremely slow and there are parts of the canvas that

问题 I'm currently thinking about using fabric.js for an on-line handwriting recognition system. For such a system, I would need to send the drawn lines as a list of lines, where each line is a list of points. So if the user has drawn an "x" on the canvas, I would like to get something like this: [ // the first line was the one going from left bottom to right top: [{'x':228, 'y':92}, {'x':229, 'y':90}, {'x':230, 'y':88}, {'x':232, 'y':86}, {'x':235, 'y':84}, {'x':238, 'y':81}, {'x':243, 'y':76}, {

问题 I want to make a hole inside of polygon with fabricjs . I can make it using normal html5 canvas with counter-clockwise as shown below, but I would prefer to make it using fabricjs . Does anyone know how to implement the attached image using 'fabriicjs'? Like this: 回答1: Here's one way to draw a cutout-polygon onto FabricJS: AFAIK, FabricJS does not yet support the compositing necessary to create cutouts from its polygons, so here's a workaround. Draw the cutout polygon onto an html5 canvas.