如何在FabricJS中将旋转点位置更改为底部？

Question

如何将“旋转点”位置更改为底部（请参见下图）？

这是选择对象的配置控制点的链接指南。 http://fabricjs.com/fabric-intro-part-4#customization

谢谢！

Answer 1

只需使用角度将圆旋转180度，如果对象不是圆，则“旋转点”将位于底部，在混合中添加flipY以使对象保持直立。

<canvas id="canvas" width="170" height="170"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>

<script>
  var obj = new fabric.Triangle({
    fill: 'lime',
    top: 110,
    left: 110,
    angle: 180,
    flipY: true,
    borderColor: 'red',
    cornerColor: 'cyan',
    cornerSize: 9,
    transparentCorners: false
  });
  
  var canvas = new fabric.Canvas('canvas');
  canvas.add(obj);
  canvas.setActiveObject(canvas.item(0));
</script>