我得到了一段记录鼠标单击并在最后绘制一个多边形的代码。绘制多边形后，它将对坐标数组进行字符串化，以备将来处理。
我面临的问题是，记录和绘制的内容以及经过字符串化的内容是两组完全不同的数据。
例如
(index):169 Mouse click at 543 179
(index):171 Object {x: 543, y: 179} contains value, match as per mouse click
(index):169 Mouse click at 310 592
(index):171 Object {x: 310, y: 592} contains value, match as per mouse click
(index):169 Mouse click at 735 480
(index):171 Object {x: 735, y: 480} contains value, match as per mouse click
(index):246 [{"x":20.5,"y":-206.5},{"x":-212.5,"y":206.5},{"x":212.5,"y":94.5}] is stringified value
JS
var coords = [];
var canvas = new fabric.Canvas('canvas');
canvas.on('mouse:down', function (options) {
getCoordinates(options);
});
$('.drawReady').click(function(){
drawMyPolygon(coords, 1);
stringifyTheData();
});
function drawMyPolygon(retData, tmpId) {
var polygon = new fabric.Polygon(retData, {
fill: 'purple',
selectable: true,
lockMovementX: true,
lockMovementY: true,
id: tmpId
});
canvas.add(polygon);
};
function getCoordinates(options) {
var pointer = canvas.getPointer(event.e);
coords.push({x: pointer.x, y: pointer.y});
}
function stringifyTheData() {
var retVal = JSON.stringify(coords);
}
看起来您正在使用1.6.0之前的fabricJS版本，在1.5.0中，fabricjs修改了点数组，而现在没有。
该cange包括减去多边形的顶部，左侧和一半宽度的每个点，以使其原点居中。
更新或克隆点数组，然后再传递到多边形。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句