Html5 canvas 如何在html5中为悬停的对象放置定位点
我有一个对象，现在我想显示锚点，以增加或减少悬停时对象的宽度 如何从HTML5画布实现这一点Html5 canvas 如何在html5中为悬停的对象放置定位点,html5-canvas,Html5 Canvas,我有一个对象，现在我想显示锚点，以增加或减少悬停时对象的宽度 如何从HTML5画布实现这一点 如何使用画布库连接对象？画布绘图库将为您提供一个用户重新缩放的快捷方式。 下面是FabricJS画布图形库自动显示定位点的示例。用户可以使用定位点调整大小和旋转 您可以在此处下载FabricJS画布库： 下载库之后，需要转到“dist”文件夹，并将“all.min.js”文件复制到脚本文件夹中。确保在html文件中引用“all.min.js”作为脚本 下面是代码和小提琴： 正文{背景色：象牙色；填
如何使用画布库连接对象？画布绘图库将为您提供一个用户重新缩放的快捷方式。 下面是FabricJS画布图形库自动显示定位点的示例。用户可以使用定位点调整大小和旋转 您可以在此处下载FabricJS画布库： 下载库之后，需要转到“dist”文件夹，并将“all.min.js”文件复制到脚本文件夹中。确保在html文件中引用“all.min.js”作为脚本 下面是代码和小提琴：
正文{背景色：象牙色；填充：30px；}
画布{边框：1px纯红；}
$（函数（）{
//告诉FabricJS管理画布绘图
var canvas=newfabric.canvas（'canvas'）；
//在画布上绘制一个织物矩形
//rectangele内置了拖动/缩放/旋转功能！
var rect=new fabric.rect({
左：150，
排名：150，
宽度：75，
身高：50，
填充：“绿色”，
角度：20，
填充：10
});
canvas.add（rect）；
}); // end$（函数（）{}）；
单击绿色矩形以激活定位点
然后拖动定位点以调整大小/旋转
<!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>