Wrong border coordinates draw polygon with fabric.js
I am trying to draw a polygon using the mouse and I found this example on a jsfiddle: http://jsfiddle.net/Kienz/ujefxh7w/ .
the problem is that when we finish the draw and try to stitch the object, the borders are outside the shape.
can we fix this or is it fabric.js bug?
as we can also see on the official fabricjs.com/ page in the examples on the first page, the drawings with free pens are also out of frame.
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');
// Do some initializing stuff
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: 'rgba(102,153,255,0.5)',
cornerSize: 12,
padding: 7
});
// ADD YOUR CODE HERE
var mode = "add",
currentShape;
canvas.observe("mouse:move", function (event) {
var pos = canvas.getPointer(event.e);
if (mode === "edit" && currentShape) {
var points = currentShape.get("points");
points[points.length - 1].x = pos.x - currentShape.get("left");
points[points.length - 1].y = pos.y - currentShape.get("top");
currentShape.set({
points: points
});
canvas.renderAll();
}
});
canvas.observe("mouse:down", function (event) {
var pos = canvas.getPointer(event.e);
if (mode === "add") {
var polygon = new fabric.Polygon([{
x: pos.x,
y: pos.y
}, {
x: pos.x + 0.5,
y: pos.y + 0.5
}], {
fill: 'blue',
opacity: 0.5,
selectable: false
});
currentShape = polygon;
canvas.add(currentShape);
mode = "edit";
} else if (mode === "edit" && currentShape && currentShape.type === "polygon") {
var points = currentShape.get("points");
points.push({
x: pos.x - currentShape.get("left"),
y: pos.y - currentShape.get("top")
});
currentShape.set({
points: points
});
canvas.renderAll();
}
});
fabric.util.addListener(window, 'keyup', function (e) {
if (e.keyCode === 27) {
if (mode === 'edit' || mode === 'add') {
mode = 'normal';
currentShape.set({
selectable: true
});
currentShape._calcDimensions(false);
currentShape.setCoords();
} else {
mode = 'add';
}
currentShape = null;
}
canvas.renderAll();
})
source to share
PROBLEM
_calcDimensions () calculates the width, height, minX and minY of the polygon, as you can see from this script http://jsfiddle.net/ujefxh7w/90/ the center point of our polygon (which is calculated using the width and height) will be changed after calling _calcDimensions () (before that, the center point was equal to the top left point, since the width and height were zero).
However, we insert all points into the polygon by subtracting the top-left position, but after calling _calcDimensions (), these points will be displayed starting at the "new" (correct) center point, as you can see from your violin.
Also, we have to handle the minX and minY offsets introduced by _calcDimensions (). If we don't, you will be able to draw some shapes with some area outside the boundaries. (for example, draw a triangle with these coordinates [(100,100), (150,50), (200,200)], the second point will not be connected).
DECISION
We need
- add minX and minY to the top-left position of our shape and subtract them from the new point values
- recalculate the coordinates of the points using the actual center point and top-left position of our polygon
http://jsfiddle.net/ujefxh7w/115/
fabric.util.addListener(window, 'keyup', function (e) {
if (e.keyCode === 27) {
if (mode === 'edit' || mode === 'add') {
mode = 'normal';
// remove last useless point
var points = currentShape.get("points");
points.pop();
currentShape.set({points: points});
// call helpers
currentShape._calcDimensions();
currentShape.setCoords();
// adjust shape position by using minX and minY offsets
var minx = currentShape.get("minX");
var miny = currentShape.get("minY");
currentShape.set({
left: currentShape.get("left") + minx,
top: currentShape.get("top") + miny
});
// adjust points coordinates by
// 1- subtracting the center point coords
// 2- adding the left-top coords
// 3- subtracting minX and minY offsets
var pCenter = currentShape.getCenterPoint();
var l = currentShape.get("left");
var t = currentShape.get("top");
var adjPoints = currentShape.get("points").map(function(p) {
return {
x: p.x - pCenter.x + l - minx,
y: p.y - pCenter.y + t - miny
};
});
currentShape.set({
points: adjPoints,
selectable: true
});
canvas.setActiveObject(currentShape);
canvas.renderAll();
} else {
mode = 'add';
}
currentShape = null;
}
});
source to share