Fabric.js库Rect（）方法无法正常工作

Question

Using 2.0.7 version of fabricjs.

> Fiddle: http://jsfiddle.net/eugene1983/gu8nna9x/

Problem is when I try to draw rect it didn't work for small size rect, but it works for bigger size rect. There is no such problem in 1.2 version of fabric. Even 1.7 version has the same problem.

May be I do something wrong?

Answer 1

You should use the built in fabric.js functions to calculate the mouse position over the canvas.

So instead of your code just use canvas.getPointer(opt.e) this will give you the exact top and left to use.

Also you were not taking in consideration the mouse going before the start position, for this reason width and height must be calculated using the absolute value

 var canvas = new fabric.Canvas('c',{ backgroundColor:'#555',selection:false }); canvas.requestRenderAll(); var crop = { enable: false }; var rectangle = new fabric.Rect({ originX: 'left', originY: 'top', fill: 'fill', stroke: '#ccc', strokeDashArray: [2, 2], width: 1, height: 1, visible: false }); canvas.add(rectangle); canvas.on("mouse:down", function(o) { var point = canvas.getPointer(oe); originLeft = point.x; originTop = point.y; rectangle.set({ left: point.x, top: point.y, width:1, height:1 }) crop.enable = true; rectangle.visible = true; canvas.bringToFront(rectangle); canvas.requestRenderAll(); }); canvas.on("mouse:move", function(o) { if (crop.enable) { var point = canvas.getPointer(oe); if (originLeft > point.x) { rectangle.set({ left: Math.abs(point.x) }); } if (originTop > point.y) { rectangle.set({ top: Math.abs(point.y) }); } rectangle.set({ width: Math.abs(originLeft - point.x), height: Math.abs(originTop - point.y) }); canvas.requestRenderAll(); } }); canvas.on("mouse:up", function(options) { crop.enable = false; }); 

 <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <canvas width="400" height="400" id="c"></canvas>