Question

我有一个对象，现在我想显示锚点，以便在悬停时增加或减少对象的宽度。

我如何从HTML5画布实现这一目标？

Flow chart sample

如何使用画布库连接对象？

Answer 1

画布绘图库可为您提供用户重新缩放的快捷方式。

以下是FabricJS画布绘图库自动显示锚点的示例。用户可以使用锚点调整大小和旋转。

enter image description here

您可以在此处下载FabricJS画布库：https://github.com/kangax/fabric.js

下载库后，需要转到“dist”文件夹并将“all.min.js”文件复制到脚本文件夹中。一定要在你的html文件中引用“all.min.js”作为脚本。

这是代码和小提琴：http://jsfiddle.net/m1erickson/g33Vp/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/all.min.js"></script>

<style>
    body{ background-color: ivory; padding:30px; }
    canvas{border: 1px solid red; }
</style>

<script>
    $(function(){

        // tell FabricJS to manage your canvas drawing
        var canvas = new fabric.Canvas('canvas');

        // draw a Fabric rectangle on the canvas
        // the rectangele comes with drag/scale/rotate built in!
        var rect = new fabric.Rect({
          left: 150,
          top: 150,
          width: 75,
          height: 50,
          fill: 'green',
          angle: 20,
          padding: 10
        });
        canvas.add(rect);

    }); // end $(function(){});
</script>

</head>

<body>
    <br/><p>Click on the green rectangle to activate anchor points</p>
    <br/><p>Then drag the anchor points to resize / rotate</p><br/>
    <canvas id="canvas" width="300" height="300"></canvas> 
</body>
</html>

如何在html5中悬停对象时放置锚点

1 个答案: