fabricjs

问题 I'm trying to implement a feature in my canvas using fabricjs that will allow me to zoom in/out an individual image thats been uploaded by a user and the watermark which I'm adding with it but not having the WHOLE canvas zoom both objects at the same time. uploadImage = event => { let file = event.target.files[0]; this.state.canvas.clear(); let URL; const reader = new FileReader(); reader.addEventListener( "load", () => { URL = reader.result; fabric.Image.fromURL(URL, myImg => { let img1 =

问题 I have two Objects on my canvas. The smaller one is on top of the larger one. I want to stop the user from resizing the bigger object to a smaller size than the smaller object. For this I hooked into the bigger objects scaling event: This example only implements it for the left side of the object. function stageIntersectsWithObject() { var stageLeft = el.getBoundingRect(true).left; var objLeft = rect1.getBoundingRect(true).left el.setCoords(); if(stageLeft > objLeft){ el.set('left', objLeft);

问题 In previous versions of fabric.js I used the getSelectionStyles in the way it's used in the getStyle function with great success. In this case: when I select some text the fontsize-slider will change to the current value for the first selected character. But after upgrading to version 2+ it doesn't work anymore. The getStyle function returns undefined . canvas.on('text:selection:changed', onSelectionChanged); function onSelectionChanged() { var obj = canvas.getActiveObject(); if (obj

问题 I am using pattern brush function of fabric js. var texturePatternBrush = new fabric.PatternBrush(canvas); My image is center align over canvas. Issue I am facing is my pattern brush is not align with main image. I want to overlap it on same position where my main image exist. It also must be no-repeat. Secondly can I scale my pattern brush image so it is same size like main image when I resize my window? Code I am using is <div class="painting-area"> <canvas id="canvas-front"></canvas> </div

问题 I have a problem with FabricJS objects. I would like to create a clipping area (svg object), which will clips loaded images. I'm using clipTo method on loaded image passing it into clipping area shape object (SVG), but it does not work, because the SVG is not shape object in sense of FabricJS. Is there any way to convert the loaded SVG into FabricJS shape like Polygon or Rect? It almost works good if I will use: globalCompositeOperation = 'source-atop' on the loaded image (and remove clipTo

问题 I'm trying to incorporate an opacity slider so that any selected objects are set to change based on the slider's position (100 being completely visible). I'm using Fabric.js version 1.7.22 and jQuery 3.3.1. I originally asked this and got a working solution (thank you @Durga) but realized I was using the wrong Fabric.js version. I've looked over the docs but am stuck. What am I doing wrong here? What I have: http://jsfiddle.net/code4ever/srm25f9d/ var canvas = new fabric.Canvas("c"); canvas

问题 I have modified some code of Fabric.text to get arc shape of text . But the problem is toSVG() is rendering the plain text instead of arc text. How can i render it properly. https://i.stack.imgur.com/A3bnx.png (Rendering Canvas) https://i.stack.imgur.com/R4cY0.png (Exported SVG) If there is an alternative way to print in svg then let me know. _renderText: function(ctx) { this._translateForTextAlign(ctx); /* this._renderTextFill(ctx);*/ this._getCircularText(ctx) /* this._renderTextStroke(ctx)

问题 I have a canvas with background image, now I need to draw virtual regions on that canvas for selecting some parts of the image. Currently I am using fabricjs to draw simple shapes like rectangle, circle on canvas. But don't know how to draw complex shapes. Can anyone help please? function createPath(event) { var pointers = canvas.getPointer(event.originalEvent); if (firstClick) { var pointsArray = ["M", pointers.x, pointers.y]; initializePath(pointsArray); firstClick = false; } else { var

问题 I am using Fabric.js Canvas on top of OpenSeadragon(osd). I am trying to create a compass/rotater widget on top of the osd image, which will rotate the osd image. It should zoom and pan with the osd image, but should not rotate with the osd image. Things are getting tidy when i use viewer.viewport.setRotation(angle); Osd Image rotates, but the location of the Fabric canvas objects also change with it, even though i have set the objects to be in the center of the image. Here is the codePen

问题 I have created an editor in fabric js. I am using custom icon for rotate and this is not visible only in iphone's google chrome. Please give me solution. This code i am using for custom icon isVML = function() { return typeof G_vmlCanvasManager !== 'undefined'; }; // overriding _drawControl method fabric.util.object.extend(fabric.Object.prototype, { hasRotatingPoint: true, cornerSize: 25, _drawControl: function(control, ctx, methodName, left, top) { if (!this.isControlVisible(control)) {