如何在 fabricjs 中创建放置图钉以显示位置，就像 google 地图一样

Question

我想为我的新项目创建一个放置图钉，就像我们通常在 google 地图中看到的一样，即立在一根细棍上的圆圈。谁能建议我如何在 FabricJS 或普通 html5 canvas 或任何其他解决方案中绘制它？

Answer 1

如果你想要一个看起来像大头针的 fabricjs 对象，你必须做两件事：

1)找到代表引脚的路径

2) 将它与原点一起使用：bottom-center 所以位置就是引脚所在的位置。

var canvas = new fabric.Canvas("canvas");
var path="M442.403,299.827c3.029,3.586,2.863,9.155-1.075,12.467v0.039l-18.944,12.31    c-12.193,8.344-64.043,17.44-134.105-68.274c-67.512-82.587-47.776-128.087-38.612-138.521l15.769-16.238c3.683-3.097,9.272-2.697,12.418,1.124l40.986,49.007c3.019,3.625,2.872,9.164-1.065,12.516v0.039l-18.387,13.092c-7.289,7.142-1.045,18.456,6.341,29.389l34.948,41.719c16.248,15.896,25.207,23.224,33.052,18.055l15.261-16.893c3.742-3.097,9.291-2.716,12.418,1.124l40.996,48.988V299.827L442.403,299.827z M557.671,215.549c0,119.02-215.559,468.685-215.559,468.685S126.563,334.569,126.563,215.549C126.563,96.48,223.102,0,342.112,0C461.171,0,557.671,96.48,557.671,215.549zM508.889,215.549c0-91.957-74.81-166.816-166.777-166.816s-166.777,74.859-166.777,166.816s74.81,166.757,166.777,166.757S508.889,307.506,508.889,215.549z";

var p = new fabric.Path(path, {originX:'center', originY:'bottom', top: 200, left: 80});
p.scale(0.2);
canvas.add(p);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas" width="400" height="400" ></canvas>

如何在 fabricjs 中创建放置图钉以显示位置，就像 google 地图一样

How to create a drop pin in fabricjs to show a location just like google maps

canvas

html5-canvas

fabricjs