fabricjs

问题 I am trying to perform a special action whenever the user double clicks any object located inside the canvas. I have read the docs and not found any mouse:dblclick -like event in the documentation. I tried doing something like: fabric.util.addListener(fabric.document, 'dblclick', callback); Which does trigger the dblclick event but does not give specific information about the actual object that is being clicked on the canvas. Any ideas of the most FabricJS-y way of doing this? 回答1: The more

问题 I have a simple fabric js based application where I will let users add shapes connect them and animate them. Following is my JS var canvas; window.newAnimation = function(){ canvas = new fabric.Canvas('canvas'); } window.addRect = function(){ var rect = new fabric.Rect({ left: 100, top: 100, fill: 'red', width: 20, height: 20, }); canvas.add(rect); } window.addCircle = function(){ var circle = new fabric.Circle({ radius: 20, fill: 'green', left: 100, top: 100 }); canvas.add(circle); } This is

问题 I have a simple fabric js based application where I will let users add shapes connect them and animate them. Following is my JS var canvas; window.newAnimation = function(){ canvas = new fabric.Canvas('canvas'); } window.addRect = function(){ var rect = new fabric.Rect({ left: 100, top: 100, fill: 'red', width: 20, height: 20, }); canvas.add(rect); } window.addCircle = function(){ var circle = new fabric.Circle({ radius: 20, fill: 'green', left: 100, top: 100 }); canvas.add(circle); } This is

问题 I have a problem here when I need create a image with transparent background. I still don´t know if the problem is with fabricjs or with php. Everything works fine when I sent a image with colored background. The problem occurs when I send a image with transparent background. The generated image is created with black background. So, let me explain better: When the user click in save button, I´m sending the string representation of the canvas to php in the server-side, to be generated the

问题 When I add a 775 x 775 image to a fabricjs canvas and resize it down to around 90 x 90, the image greatly loses its quality. But if I add that same image as an <img/> and scale it down, it retains its quality. Why does the canvas image become so low quality? How can I make the canvas image retain it's original quality like the <img/> does? 回答1: It should probably go for a comment, but unfortunately I am new here and I can't add comments. However, to me it looks like antialiasing issue. Canvas

问题 HTML: <div class="canvas-wrapper"> <canvas id="myCanvas"></canvas> </div> CSS .canvas-wrapper { width: 900px; min-height: 600px; } #myCanvas{ border:1px solid red; position: absolute; top:22px; left:0px; height: 100%; width: 99%; } JS var myCanvas = new fabric.Canvas('myCanvas'); My canvas get resized to 300x150 after it's been initialized, why? 回答1: in the latest version, you will have to do something like: var canvas = new fabric.Canvas('myCanvas'); canvas.setHeight(500); canvas.setWidth

问题 HTML: <div class="canvas-wrapper"> <canvas id="myCanvas"></canvas> </div> CSS .canvas-wrapper { width: 900px; min-height: 600px; } #myCanvas{ border:1px solid red; position: absolute; top:22px; left:0px; height: 100%; width: 99%; } JS var myCanvas = new fabric.Canvas('myCanvas'); My canvas get resized to 300x150 after it's been initialized, why? 回答1: in the latest version, you will have to do something like: var canvas = new fabric.Canvas('myCanvas'); canvas.setHeight(500); canvas.setWidth

问题 at the moment I try to implement a zoom-functionallity to a visual-editor based on the fabricjs-framework. I've looked around but got more and more confused as I recognized that the development of this feature/function was a long and rocky road for the community and developers. Because of that, many solutions seems to be already outdated. But at the moment I found fabric-viewport developed by the RTSGroup on Github. The implementation was easy, but it only can zoom/control the objects in

问题 I would define a text box (single-line) By default, with a character size of 16 (for example) When the text gets bigger than the text box, I do not want it to wrap or the text box gets bigger, I want the text size to fit the maximum size of the text box. text. When the text returns to a smaller size, it can resume its initial size (in our example 16). Possibly manage a minimum size If you have an idea, I take :) thanks in advance Test Case : http://jsfiddle.net/Da7SP/273/ // initialize fabric

问题 I have the following which doesn't work correctly: var canvas = new fabric.Canvas('canvas'); canvas.observe('mouse:down', function(e) { mousedown(e); }); canvas.observe('mouse:move', function(e) { mousemove(e); }); canvas.observe('mouse:up', function(e) { mouseup(e); }); var started = false; var x = 0; var y = 0; /* Mousedown */ function mousedown(e) { var mouse = canvas.getPointer(e.memo.e); started = true; x = mouse.x; y = mouse.y; var square = new fabric.Rect({ width: 1, height: 1, left: