blocks|key|343174|text|可以通过在初始化时设置originX和originY点来修复“跳跃”多边形。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343175|++++++++var+polygon+=+new+fabric.Polygon([{
++++++++x:+pos.x,
++++++++y:+pos.y
++++},+{
++++++++x:+pos.x+%2B+0.5,
++++++++y:+pos.y+%2B+0.5
++++}],+{
++++++++fill:+'blue',
++++++++opacity:+0.5,
++++++++selectable:+false,
++++++++originX:+pos.x,
++++++++originY:+pos.y
++++});|code-block|syntax|javascript|343176|查看此处：http://jsfiddle.net/ujefxh7w/48/|offset|length|343177|我不知道为什么选择框被移动了。|343178|编辑:发现重新加载画布对象会修复选择框|style|BOLD|343179|序列化和加载序列化的对象可以做到这一点：|343180|var+json+=+JSON.stringify(canvas);
canvas.loadFromJSON(json,+function()+{
++++canvas.renderAll();
});|343181|http://jsfiddle.net/ujefxh7w/50/|343182|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ujefxh7w/48/|1^0|0|0|5|W|0|0|0|0|J|0|0|0|0|W|1|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@]|9|@$I|18|J|19|1|1A]]|A|$]]|$1|K|3|L|5|6|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1C|8|@$I|1D|J|1E|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|1G|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1H|8|@]|9|@$I|1I|J|1J|1|1K]]|A|$]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|V]]]]

<p>you can fix the 'jumping' polygon by setting the originX and originY points on initialization.</p>

<pre><code>        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,
        originX: pos.x,
        originY: pos.y
    });
</code></pre>

<p>See here:
<a href="http://jsfiddle.net/ujefxh7w/48/" rel="nofollow">http://jsfiddle.net/ujefxh7w/48/</a></p>

<p>I don't know why the selection box is shifted.</p>

<p><strong>EDIT: found that reloading of the canvas object fixes the select box</strong></p>

<p>serializing, and loading the serialized objects does the trick:</p>

<pre><code>var json = JSON.stringify(canvas);
canvas.loadFromJSON(json, function() {
    canvas.renderAll();
});
</code></pre>

<p><a href="http://jsfiddle.net/ujefxh7w/50/" rel="nofollow">http://jsfiddle.net/ujefxh7w/50/</a></p>


blocks|key|2254814|text|问题定义|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2254815|当多边形被添加为静态对象时(从这个意义上说，点不会被修改)，它的left,+right,+minX,+minY,+width,+height和中心点可以根据提供的点来计算。|offset|length|style|CODE|2254816|但是当一个人想要动态创建一个多边形时，问题就出现了。在调用setCoords()之后，它会计算移动框的位置，但它是基于有关宽度和高度的错误信息。|2254817|记住，，当创建1点多边形时，它的宽度和高度等于0，左上角等于1点。|2254818|解决方案|2254819|首先，修改大小|2254820|_calcDimensions()计算多边形的width、height、minX和minY。minX和minY是所有点的最小值。|2254821|这会告诉我们一些点被放置在旧中心上方的左侧和顶部有多远。我们应该使用此信息将旧的左侧移动到正确的位置。新的左上角点是由minX和minY信息转换的旧中心点。|2254822|var+oldC+=+polygon.getCenterPoint();
polygon._calcDimensions();
polygon.set({
++left:+oldC.x+%2B+polygon.get('minX'),
++top:+oldC.y+%2B+polygon.get('minY')
});|code-block|syntax|javascript|2254823|固定点|2254824|在中心移动了一些向量v+(由于更改了left、right和width、height属性的结果)之后。我们需要通过v的反向更新所有的点。|2254825|var+newC+=+polygon.getCenterPoint();
var+moveX+=+-(newC.x-oldC.x);
var+moveY+=+-(newC.y-oldC.y)
var+adjPoints+=+polygon.get("points").map(function(p)+{
++return+{
++++x:+p.x+%2B+moveX,
++++y:+p.y+%2B+moveY
++};
});|2254826|有关完整的示例，请查看以下文件：http://jsfiddle.net/orian/dyxjkmes/5/|2254827|​|2254828|/**
+*+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/all.js).
+*/

//+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+%2B+0.5,
++++++y:+pos.y+%2B+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'+%7C%7C+mode+===+'add')+{
++++++++++mode+=+'normal';

++++++++++var+points+=+currentShape.get("points");
++++++++++points.pop();
++++++++++currentShape.set({
++++++++++++points:+points
++++++++++});

++++++++++var+oldC+=+currentShape.getCenterPoint();
++++++++++currentShape._calcDimensions();

++++++++++var+xx+=+currentShape.get("minX");
++++++++++var+yy+=+currentShape.get("minY");
++++++++++currentShape.set({
++++++++++++left:+currentShape.get('left')+%2B+xx,
++++++++++++top:+currentShape.get('top')+%2B+yy
++++++++++});

++++++++++var+pCenter+=+currentShape.getCenterPoint();
++++++++++var+adjPoints+=+currentShape.get("points").map(function(p)+{
++++++++++++return+{
++++++++++++++x:+p.x+-+pCenter.x+%2B+oldC.x,
++++++++++++++y:+p.y+-+pCenter.y+%2B+oldC.y
++++++++++++};
++++++++++});
++++++++++currentShape.set({
++++++++++++points:+adjPoints,
++++++++++++selectable:+true
++++++++++});

++++++++++canvas.setActiveObject(currentShape);
++++++++++currentShape.setCoords();
++++++++++canvas.renderAll();
++++++++}+else+{
++++++++++mode+=+'add';
++++++++}
++++++++currentShape+=+null;
++++++}
++++})|2254829|canvas+{
++border:+1px+solid+#999;
}

img+{
++display:+none;
}|2254830|<script+src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas+id="c"+width="600"+height="600"></canvas>|2254831|2254832|复制和粘贴|2254833|function+fixPoly(poly)+{
++var+oldC+=+poly.getCenterPoint();
++poly._calcDimensions();
++poly.set({
++++left:+poly.get('left')+%2B+poly.get("minX"),
++++top:+poly.get('top')+%2B+poly.get("minY")
++});

++var+pCenter+=+poly.getCenterPoint();
++poly.get("points").forEach((p)+=>+{
++++p.x+-=+pCenter.x+-+oldC.x;
++++p.y+-=+pCenter.y+-+oldC.y
++});
++poly.setCoords();
};|2254834|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/orian/dyxjkmes/5/^0|0|W|12|0|T|B|0|0|0|0|0|H|N|5|T|6|10|4|15|4|1A|4|1F|4|0|1N|4|1S|4|0|0|0|A|1|I|4|N|5|T|5|Z|6|1K|1|0|0|G|11|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1S|8|@$D|1T|E|1U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1V|8|@$D|1W|E|1X|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|20|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|21|8|@$D|22|E|23|F|G]|$D|24|E|25|F|G]|$D|26|E|27|F|G]|$D|28|E|29|F|G]|$D|2A|E|2B|F|G]|$D|2C|E|2D|F|G]|$D|2E|E|2F|F|G]]|9|@]|A|$]]|$1|R|3|S|5|6|7|2G|8|@$D|2H|E|2I|F|G]|$D|2J|E|2K|F|G]]|9|@]|A|$]]|$1|T|3|U|5|V|7|2L|8|@]|9|@]|A|$W|X]]|$1|Y|3|Z|5|6|7|2M|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|2N|8|@$D|2O|E|2P|F|G]|$D|2Q|E|2R|F|G]|$D|2S|E|2T|F|G]|$D|2U|E|2V|F|G]|$D|2W|E|2X|F|G]|$D|2Y|E|2Z|F|G]]|9|@]|A|$]]|$1|12|3|13|5|V|7|30|8|@]|9|@]|A|$W|X]]|$1|14|3|15|5|6|7|31|8|@]|9|@$D|32|E|33|1|34]]|A|$]]|$1|16|3|17|5|6|7|35|8|@]|9|@]|A|$]]|$1|18|3|19|5|V|7|36|8|@]|9|@]|A|$W|X]]|$1|1A|3|1B|5|V|7|37|8|@]|9|@]|A|$W|X]]|$1|1C|3|1D|5|V|7|38|8|@]|9|@]|A|$W|X]]|$1|1E|3|17|5|6|7|39|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|3A|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|V|7|3B|8|@]|9|@]|A|$W|X]]|$1|1J|3|-4|5|6|7|3C|8|@]|9|@]|A|$]]]|1K|$1L|$5|1M|1N|1O|A|$1P|1Q]]]]

<h1>Problem definition</h1>

<p>When the polygon is added as static object (in sense that the points won't be modified) it's <code>left, right, minX, minY, width, height</code> and center point can be calculated based on provided points.</p>

<p>But when one wants a polygon to be created dynamically the problem arises.
After calling <code>setCoords()</code> it calculates the locations of the move boxes but it's based on the incorrect information about width and height. </p>

<p><strong>Remember</strong>, when creating 1 point Polygon, it has width and height equal to 0, and the top left is equal to that one point.</p>

<h1>Solution</h1>

<h2>First, correct the size</h2>

<p><code>_calcDimensions()</code> calculates <code>width</code>, <code>height</code>, <code>minX</code> and <code>minY</code> of the polygon. <code>minX</code> and <code>minY</code> are the minima in all points. </p>

<p>This informs us how far left and top above the old center some points were placed. We should use this information to move the old left to the correct spot. The new top-left point is the old center point translated by the <code>minX</code> and <code>minY</code> information.</p>

<pre><code>var oldC = polygon.getCenterPoint();
polygon._calcDimensions();
polygon.set({
  left: oldC.x + polygon.get('minX'),
  top: oldC.y + polygon.get('minY')
});
</code></pre>

<h2>Fix points</h2>

<p>After the center has moved by some vector <code>v</code> (a result of changing <code>left</code>, <code>right</code> and <code>width</code>, <code>height</code> properties). We need to updated all points by a reverse of <code>v</code>.</p>

<pre><code>var newC = polygon.getCenterPoint();
var moveX = -(newC.x-oldC.x);
var moveY = -(newC.y-oldC.y)
var adjPoints = polygon.get("points").map(function(p) {
  return {
    x: p.x + moveX,
    y: p.y + moveY
  };
});
</code></pre>

<p>Check following Fiddle for the full example: <a href="http://jsfiddle.net/orian/dyxjkmes/5/" rel="nofollow">http://jsfiddle.net/orian/dyxjkmes/5/</a></p>

<p><div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/**
 * 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/all.js).
 */

// 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" &amp;&amp; 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" &amp;&amp; currentShape &amp;&amp; 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';

          var points = currentShape.get("points");
          points.pop();
          currentShape.set({
            points: points
          });

          var oldC = currentShape.getCenterPoint();
          currentShape._calcDimensions();

          var xx = currentShape.get("minX");
          var yy = currentShape.get("minY");
          currentShape.set({
            left: currentShape.get('left') + xx,
            top: currentShape.get('top') + yy
          });

          var pCenter = currentShape.getCenterPoint();
          var adjPoints = currentShape.get("points").map(function(p) {
            return {
              x: p.x - pCenter.x + oldC.x,
              y: p.y - pCenter.y + oldC.y
            };
          });
          currentShape.set({
            points: adjPoints,
            selectable: true
          });

          canvas.setActiveObject(currentShape);
          currentShape.setCoords();
          canvas.renderAll();
        } else {
          mode = 'add';
        }
        currentShape = null;
      }
    })</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
  border: 1px solid #999;
}

img {
  display: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"&gt;&lt;/script&gt;
&lt;canvas id="c" width="600" height="600"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>

<h1>Copy&amp;paste</h1>

<pre><code>function fixPoly(poly) {
  var oldC = poly.getCenterPoint();
  poly._calcDimensions();
  poly.set({
    left: poly.get('left') + poly.get("minX"),
    top: poly.get('top') + poly.get("minY")
  });

  var pCenter = poly.getCenterPoint();
  poly.get("points").forEach((p) =&gt; {
    p.x -= pCenter.x - oldC.x;
    p.y -= pCenter.y - oldC.y
  });
  poly.setCoords();
};
</code></pre>


blocks|key|5381074|text|这个问题有两种解决方案，它们非常非常简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5381075|解决方案#1|5381076|只需从画布中删除多边形并重新创建它(使用新的fabric.Polygon(...))每增加一分！|5381077|优点和缺点:是的，你会得到一个稍微差一点的性能，因为画布将被重新渲染两次，但你可以省去每次重新计算坐标的麻烦。|5381078|您可以在下面的代码片段或this+forked+fiddle中查看此解决方案。|offset|length|5381079|​|5381080|/**
+*+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/all.js).
+*/

//+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;
++++points[points.length+-+1].y+=+pos.y;
++++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+%2B+0.5,
++++++y:+pos.y+%2B+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,
++++++y:+pos.y
++++});
++++canvas.remove(currentShape);
++++currentShape+=+new+fabric.Polygon(points,+{
++++++fill:+'blue',
++++++opacity:+0.5,
++++++selectable:+false
++++});
++++canvas.add(currentShape);
++}
});

fabric.util.addListener(window,+'keyup',+function(e)+{
++if+(e.keyCode+===+27)+{
++++if+(mode+===+'edit'+%7C%7C+mode+===+'add')+{
++++++mode+=+'normal';
++++++var+points+=+currentShape.get('points');
++++++canvas.remove(currentShape);
++++++currentShape+=+new+fabric.Polygon(points,+{
++++++++fill:+'blue',
++++++++opacity:+0.5,
++++++++selectable:+true
++++++});
++++++canvas.add(currentShape);
++++}+else+{
++++++mode+=+'add';
++++}
++++currentShape+=+null;
++}
})|code-block|syntax|javascript|5381081|canvas+{
++border:+1px+solid+#999;
}
img+{
++display:+none;
}|5381082|<script+src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas+id="c"+width="600"+height="600"></canvas>|5381083|5381084|解决方案#2|5381085|每次重新计算多边形的尺寸，就像在polygon类的构造函数中一样。代码摘录：|5381086|currentShape.set({
++++points:+points
});
currentShape._calcDimensions();
currentShape.set({
++++left:+currentShape.minX,
++++top:+currentShape.minY,
++++pathOffset:+{
++++++++x:+currentShape.minX+%2B+currentShape.width+/+2,
++++++++y:+currentShape.minY+%2B+currentShape.height+/+2
++++}
});
currentShape.setCoords();
canvas.renderAll();|5381087|优点和缺点:更好的性能(在负载很重的画布上可能很明显)，但你会有更多的代码，因为你必须将它添加到两个处理程序中。|5381088|您可以在下面的代码片段或this+forked+fiddle中查看这一点。|5381089|5381090|/**
+*+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/all.js).
+*/

//+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;
++++points[points.length+-+1].y+=+pos.y;
++++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+%2B+0.5,
++++++y:+pos.y+%2B+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,
++++++y:+pos.y
++++});
++++currentShape.set({
++++++points:+points
++++});
++++currentShape._calcDimensions();
++++currentShape.set({
++++++left:+currentShape.minX,
++++++top:+currentShape.minY,
++++++pathOffset:+{
++++++++x:+currentShape.minX+%2B+currentShape.width+/+2,
++++++++y:+currentShape.minY+%2B+currentShape.height+/+2
++++++}
++++});
++++currentShape.setCoords();
++++canvas.renderAll();
++}
});

fabric.util.addListener(window,+'keyup',+function(e)+{
++if+(e.keyCode+===+27)+{
++++if+(mode+===+'edit'+%7C%7C+mode+===+'add')+{
++++++mode+=+'normal';
++++++currentShape.set({
++++++++selectable:+true
++++++});
++++++currentShape._calcDimensions();
++++++currentShape.set({
++++++++left:+currentShape.minX,
++++++++top:+currentShape.minY,
++++++++pathOffset:+{
++++++++++x:+currentShape.minX+%2B+currentShape.width+/+2,
++++++++++y:+currentShape.minY+%2B+currentShape.height+/+2
++++++++}
++++++});
++++++currentShape.setCoords();
++++++canvas.renderAll();
++++}+else+{
++++++mode+=+'add';
++++}
++++currentShape+=+null;
++}
})|5381091|canvas+{
++border:+1px+solid+#999;
}
img+{
++display:+none;
}|5381092|<script+src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas+id="c"+width="600"+height="600"></canvas>|5381093|5381094|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/v1fvxx6L/2/|1|http://jsfiddle.net/v1fvxx6L/3/^0|0|0|0|0|C|I|0|0|0|0|0|0|0|0|0|0|0|C|I|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1R|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1S|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1T|8|@]|9|@$J|1U|K|1V|1|1W]]|A|$]]|$1|L|3|M|5|6|7|1X|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1Y|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|P|7|1Z|8|@]|9|@]|A|$Q|R]]|$1|U|3|V|5|P|7|20|8|@]|9|@]|A|$Q|R]]|$1|W|3|M|5|6|7|21|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|22|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|23|8|@]|9|@]|A|$]]|$1|11|3|12|5|P|7|24|8|@]|9|@]|A|$Q|R]]|$1|13|3|14|5|6|7|25|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|26|8|@]|9|@$J|27|K|28|1|29]]|A|$]]|$1|17|3|M|5|6|7|2A|8|@]|9|@]|A|$]]|$1|18|3|19|5|P|7|2B|8|@]|9|@]|A|$Q|R]]|$1|1A|3|1B|5|P|7|2C|8|@]|9|@]|A|$Q|R]]|$1|1C|3|1D|5|P|7|2D|8|@]|9|@]|A|$Q|R]]|$1|1E|3|M|5|6|7|2E|8|@]|9|@]|A|$]]|$1|1F|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]]|1G|$1H|$5|1I|1J|1K|A|$1L|1M]]|1N|$5|1I|1J|1K|A|$1L|1O]]]]

<p>There are two solutions to this problem, which are very very simple:</p>

<h3>Solution #1</h3>

<p>Just remove the polygon from the canvas and recreate it (using new fabric.Polygon(...)) on every added point!</p>

<p><em>Pros &amp; Cons</em>: Yes, you will get a slightly worse performance, because the canvas will be rerendered twice, but you will save yourself the trouble of recalculating the coordinates every time.</p>

<p>You can check this solution out in the snippet below or in <a href="http://jsfiddle.net/v1fvxx6L/2/" rel="nofollow">this forked fiddle</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/**
 * 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/all.js).
 */

// 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" &amp;&amp; currentShape) {
    var points = currentShape.get("points");
    points[points.length - 1].x = pos.x;
    points[points.length - 1].y = pos.y;
    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" &amp;&amp; currentShape &amp;&amp; currentShape.type === "polygon") {
    var points = currentShape.get("points");
    points.push({
      x: pos.x,
      y: pos.y
    });
    canvas.remove(currentShape);
    currentShape = new fabric.Polygon(points, {
      fill: 'blue',
      opacity: 0.5,
      selectable: false
    });
    canvas.add(currentShape);
  }
});

fabric.util.addListener(window, 'keyup', function(e) {
  if (e.keyCode === 27) {
    if (mode === 'edit' || mode === 'add') {
      mode = 'normal';
      var points = currentShape.get('points');
      canvas.remove(currentShape);
      currentShape = new fabric.Polygon(points, {
        fill: 'blue',
        opacity: 0.5,
        selectable: true
      });
      canvas.add(currentShape);
    } else {
      mode = 'add';
    }
    currentShape = null;
  }
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
  border: 1px solid #999;
}
img {
  display: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"&gt;&lt;/script&gt;
&lt;canvas id="c" width="600" height="600"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>

<h3>Solution #2</h3>

<p>Recalculate the polygon dimensions every time, like it is done in the constructor of Polygon class. Excerpt from the code:</p>

<pre><code>currentShape.set({
    points: points
});
currentShape._calcDimensions();
currentShape.set({
    left: currentShape.minX,
    top: currentShape.minY,
    pathOffset: {
        x: currentShape.minX + currentShape.width / 2,
        y: currentShape.minY + currentShape.height / 2
    }
});
currentShape.setCoords();
canvas.renderAll();
</code></pre>

<p><em>Pros &amp; Cons</em>: Better performance (probably noticeable on heavily loaded canvases), but you will have more code as you have to add it to both handlers.</p>

<p>You can check this out in the snippet below or in <a href="http://jsfiddle.net/v1fvxx6L/3/" rel="nofollow">this forked fiddle</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/**
 * 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/all.js).
 */

// 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" &amp;&amp; currentShape) {
    var points = currentShape.get("points");
    points[points.length - 1].x = pos.x;
    points[points.length - 1].y = pos.y;
    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" &amp;&amp; currentShape &amp;&amp; currentShape.type === "polygon") {
    var points = currentShape.get("points");
    points.push({
      x: pos.x,
      y: pos.y
    });
    currentShape.set({
      points: points
    });
    currentShape._calcDimensions();
    currentShape.set({
      left: currentShape.minX,
      top: currentShape.minY,
      pathOffset: {
        x: currentShape.minX + currentShape.width / 2,
        y: currentShape.minY + currentShape.height / 2
      }
    });
    currentShape.setCoords();
    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();
      currentShape.set({
        left: currentShape.minX,
        top: currentShape.minY,
        pathOffset: {
          x: currentShape.minX + currentShape.width / 2,
          y: currentShape.minY + currentShape.height / 2
        }
      });
      currentShape.setCoords();
      canvas.renderAll();
    } else {
      mode = 'add';
    }
    currentShape = null;
  }
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
  border: 1px solid #999;
}
img {
  display: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"&gt;&lt;/script&gt;
&lt;canvas id="c" width="600" height="600"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3269865|text|对于那些正在寻找使用fabricjs+3的更新答案的人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3269866|FabricJS有很多更改，其中之一是对_calcDimmensions方法的更改。它不再在对象上存储值minX和minY。相反，它会返回一个包含以下内容的对象：|3269867|++{
++++left:+minX,
++++top:+minY,
++++width:+width,
++++height:+height
++}|code-block|syntax|javascript|3269868|因此，考虑到这一点，解决方案更新为以下内容：|3269869|currentShape.set({
points:+points
});
var+calcDim+=+currentShape._calcDimensions();
currentShape.width+=+calcDim.width;
currentShape.height+=+calcDim.height;
currentShape.set({
++++left:+calcDim.left,
++++top:+calcdim.top,
++++pathOffset:+{
++++++++x:+calcDim.left+%2B+currentShape.width+/+2,
++++++++y:+calcDim.top+%2B+currentShape.height+/+2
++++}
});
currentShape.setCoords();
canvas.renderAll();|3269870|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>For those looking for an updated answer that uses fabricjs 3. </p>

<p>FabricJS had a lot of changes, one of them being to the _calcDimmensions method. It no longer stores the values minX and minY on the object. It instead returns an object with the following:</p>

<pre><code>  {
    left: minX,
    top: minY,
    width: width,
    height: height
  }
</code></pre>

<p>So with that in mind, the solution updates to the following:</p>

<pre><code>currentShape.set({
points: points
});
var calcDim = currentShape._calcDimensions();
currentShape.width = calcDim.width;
currentShape.height = calcDim.height;
currentShape.set({
    left: calcDim.left,
    top: calcdim.top,
    pathOffset: {
        x: calcDim.left + currentShape.width / 2,
        y: calcDim.top + currentShape.height / 2
    }
});
currentShape.setCoords();
canvas.renderAll();
</code></pre>


<p>I want draw a <code>fabric.Polygon</code> with mouse interaction in Fabric.js.
I made a small jsfiddle to show my actual state: <a href="http://jsfiddle.net/Kienz/ujefxh7w/" rel="noreferrer">http://jsfiddle.net/Kienz/ujefxh7w/</a></p>

<p>After pressing the ESC key, the "interactive draw mode" is canceled and the polygon is finalized. But now the position of the polygon is wrong (controls are right).</p>

<p>Has anyone an idea?</p>


Fabric.js: How to draw a polygon by mouse

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我想在Fabric.js中绘制一个带有鼠标交互的fabric.Polygon。我做了一个小的jsfiddle来显示我的实际状态：按ESC键后，将取消“交互式绘制模式”，并最终确定多边形。但是现在多边形的位置是错误的(控件是正确的)。有谁有主意吗？

问Fabric.js:如何用鼠标绘制多边形
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fabric.js:如何用鼠标绘制多边形EN