多邊形動態操作后邊界/選擇框的 fabricjs 問題

Question

使用 fabricjs，我繪制了一個多邊形。 並在多邊形的每個點放置點標記。 現在，當用戶拖動此點標記時，我會動態操作相應的多邊形點，以允許用戶根據需要修改多邊形。

先點擊黑色多邊形，你會看到選擇框（邊界框），現在拖動任何綠色點修改多邊形，修改多邊形后，再次嘗試點擊黑色多邊形，邊界框/選擇區域/可點擊區域與之前相同一，雖然它應該包括新的修改多邊形。

我試着搜索谷歌和這里，只發現 use.setCoods() 方法，但在這種情況下不起作用。

我正在使用 3.6.3 版本的 fabricjs。

請幫忙。

 /** * fabric.js template for bug reports * * Please update the name of the jsfiddle (see Fiddle Options). * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js). */ // initialize fabric canvas and assign to global windows object for debug var canvas = window._canvas = new fabric.Canvas('c'); // ADD YOUR CODE HERE var points = [{"x":60,"y":20},{"x":100,"y":40},{"x":100,"y":80},{"x":60,"y":100},{"x":20,"y":80},{"x":20,"y":40}] var options = {selectable: true, objectCaching: false}; var polygon = new fabric.Polygon(points, options); canvas.add(polygon); points.forEach(function(point, index) { var circle = new fabric.Circle({ radius: 5, fill: 'green', left: point.x, top: point.y, originX: 'center', originY: 'center', hasBorders: false, hasControls: false, name: index }); canvas.add(circle); }); canvas.on('object:moving', function (options) { var objType = options.target.get('type'); var p = options.target; polygon.points[p.name] = {x: p.getCenterPoint().x, y: p.getCenterPoint().y}; //UNCOMMENT LINES 39 - 42 TO HAVE A WORKAROUND //canvas.remove(polygon); //polygon = new fabric.Polygon(polygon.points, {selectable: false}); //canvas.add(polygon); //canvas.sendToBack(polygon); });

 canvas { border: 1px solid #999; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script> <canvas id="c" width="600" height="600"></canvas>

Answer 1

重新分配點后我的多邊形也沒有更新。 我顯然想避免重新插入 object，因為這經常執行。 我記得我以前用過這個例子，然后再回來看； 並注意到他們調用polygonObject._setPositionDimensions({})並且不使用 output 值。

我沒有失望，它實際上正確地更新了所有屬性。 沒有什么對我有用， setCoords幾乎沒用。 _setPositionDimensions({})修復了一切。

Answer 2

我有一個類似的問題。

我通過以下方式解決了這個問題：

• 重新創建原始多邊形（基本上是克隆它）
• 從 canvas 中刪除原始多邊形
• 將新多邊形添加到 canvas

不完全是修復，而是對我有用的解決方法。

Answer 3

我最近也發生了同樣的問題，我改變了多邊形的點，需要更新邊界框。

設置點后，您可以設置重新計算邊界框，如下所示：

const { width, height, left, top } = polygon._calcDimensions();
polygon.set({
    width,
    height,
    originX: 'left',
    originY: 'top',
    pathOffset: new fabric.Point(left + width / 2, top + height / 2),
}).setCoords();
canvas.requestRenderAll();