0

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

我怎样才能从 HTML5 画布中实现这一点？

流程图示例

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

4

1 回答 1

1

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

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

在此处输入图像描述

您可以在此处下载 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>
于 2013-03-19T17:08:11.887 回答