fabricjs

问题 When you have a canvas element set to hasControls little controls render when the user clicks the element. These controls are little canvas squares. I would like to overlay little lines on the square controls to give a further polish to look and feel. 回答1: override fabric Object _drawControl function: fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) { if (!this.isControlVisible(control)) { return; } var size = this.cornerSize; this.transparentCorners || ctx

问题 When you have a canvas element set to hasControls little controls render when the user clicks the element. These controls are little canvas squares. I would like to overlay little lines on the square controls to give a further polish to look and feel. 回答1: override fabric Object _drawControl function: fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) { if (!this.isControlVisible(control)) { return; } var size = this.cornerSize; this.transparentCorners || ctx

问题 I am currently using fabricJS( version 1.4.0 ) canvas and i have 100 objects that i manually add on the canvas, however objects only appear when i click anywhere on the canvas , is there a way of forcing the canvas to refresh itself ? Here is kind of scenario i have if it can help somehow. .... initComplete: function (settings, json) { let clients = json; if(clients.length !== 0) { //clients is an array of length 100 for (client of clients) { let icone = new Image; if (client.ProfileId !== ''

问题 In short, I am developing a project in which there are two canvases: a canvas that supports zoom and drawing, a second canvas - a duplicate of the first canvas, which should display a general view without zoom. Unfortunately, I do not understand how to implement this, since the second canvas also displays a picture with a zoom. Please, help! Here is a small example of what I have: var c1 = document.getElementById("scale"); var c2 = document.getElementById("static"); var canvas = this.__canvas

问题 If I want to add an extra line to an existing polyline, should I remove this existing polyline from the canvas first, modify the points matrix, and add the new polyline? Or is it possible to change the existing polyline, like changing the text of a text object? 回答1: You may remove whole polyline and add a new one or else you need to calculate the dimensions(left,top and pathoffset) and set it to polyline. DEMO var canvas = new fabric.Canvas('c'); var points = []; var random = fabric.util

问题 In this jsfiddle I have a Fabric (version 1.x) Textbox that has a red border when it's selected and a blue border when the text is editable. What I need is a border when the TextBox is not selected. How to achieve that? HTML <canvas id="c" width="300" height="300"></canvas> Javascript var canvas = new fabric.Canvas('c'); var text = new fabric.Textbox("Some Text", { left: 50, top: 50, width: 100, fontSize: 12, fontFamily: 'Arial', backgroundColor: 'yellow', borderColor: 'red',

问题 I am working on a fabric js application & i need work with measurement units like inches & mm I tried this code & it display blank So my question is how work with units like inch & mm in fabric js a = new fabric.Rect({ top:0, left:0 , fill: '#000', width: 50mm, height: 50mm, }); b = new fabric.Rect({ top:0, left:200, fill: '#000', width: 1in, height: 1in, }); canvas.add(a, b); <canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas> 回答1: fabricjs works in pixels.

问题 I am working on a fabric js application & i need work with measurement units like inches & mm I tried this code & it display blank So my question is how work with units like inch & mm in fabric js a = new fabric.Rect({ top:0, left:0 , fill: '#000', width: 50mm, height: 50mm, }); b = new fabric.Rect({ top:0, left:200, fill: '#000', width: 1in, height: 1in, }); canvas.add(a, b); <canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas> 回答1: fabricjs works in pixels.

问题 I am looking for a way to extend the base fabric.Object class with a custom attribute I can save to JSON and load from JSON that would propagate all the way into the various sub classes. Specifically i want to store a depth attribute so when i load the objects from the JSON i will be able to add the appropriate parallax to the object. I imagine the solution would include modifying the fabric.Object.prototype. But i am still learning how to work with prototypes. Here is some examples of what i

问题 I have set custom properties on SVG objects and on paths within the SVG objects. Each object I add to the canvas also gets assigned an 'id' property, as well as some others properties that I use to interact with the objects in the app. So far, when I clone these objects, I have been able to retain the properties that are on the SVG object by storing them in a session variable prior to cloning, then adding them back after cloning. My problem is with the properties that are set on each of the