main

分支 (1)

管理

管理

main

canvasPlot
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>canvas图片实现拖拽缩放功能</title>
	<style>
		body,
		div {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<div style="width: 100%;height: 100%;">
		<div style="width: 100%;height: 80px;background-color: antiquewhite;font-size: 24px;font-weight: 600;">
			canvasPlot批注绘制-鼠标绘制矩形，拖动，按住右键画布整体拖动，滚轮整体缩放
		</div>
		<div style="width: 100%;height: calc(100% - 40px);display: flex;">
			<div style="width:300px;height:100%;background-color: #cccccc;font-size: 24px;font-weight: 600;">
				未来会增加文字，直线，云线，箭头，圆形等等功能
			</div>
			<div style="width:calc(100% - 300px);height:100%;">
				<div style="width:100%;height:100px;background-color:wheat;">

				</div>
				<div id="container" style="height:calc(100% - 100px);width:100%;position: relative;">

				</div>
			</div>
		</div>

	</div>
	<script src="canvasPlot.js"></script>
	<script>
		//lightskyblue
		var canvasPlot = new CanvasPlot({
			parentNode: document.querySelector("#container"),
			imagePath: '3.jpg',
			deleteBtnText: "删除",
			showMenu: true,
			rectBgColor: "rgba(255, 255, 255, 0.6)",
			dragMoveButton: "midddleClick" //rightClick midddleClick
		});
		canvasPlot.setData({
			"offset": {
				"scale": 2,
				"x": 415.9,
				"y": 220.1
			},
			"data": [
				{
					"params": ["111", "2222"],
					"x": 212,
					"y": 119,
					"w": 50,
					"h": 50,
					"fill": "rgba(255, 255, 255, 0)",
					"strokeColor": "#0d0efd",
					"lineWidth": 1,
					"selected": false,
					"delselected": false,
					"sideLength": 10,
					"rectColor": "#00ff00",
					"fillColor": "#ffffff",
					"disabled": false,
					"dragging": false,
					"resizing": false,
					"index": 0,
					"type": "rect",
					"uuid": "98849a3e-14c8-5ea0-9847-c829f30a64fa"
				},
				{
					"x": 338,
					"y": 135.5,
					"w": 60,
					"h": 30,
					"fill": "rgba(255, 255, 255, 0)",
					"strokeColor": "#0d0efd",
					"lineWidth": 1,
					"selected": true,
					"delselected": false,
					"sideLength": 10,
					"rectColor": "#00ff00",
					"fillColor": "#ffffff",
					"disabled": false,
					"dragging": false,
					"resizing": false,
					"index": 1,
					"type": "rect",
					"uuid": "49beb8ac-8825-d01b-a541-cb4050c0bd66"
				}
			]
		})
		canvasPlot.drawRectBegin();
		canvasPlot.on("dragMoveFinish", () => {
			console.log("dragMoveFinish")
		})
		canvasPlot.on("drawing", (selection) => {
			console.log("drawing", selection)
		})
		canvasPlot.on("drawFinish", (selection) => {
			console.log("drawFinish", selection)
		})
		canvasPlot.on("drawMove", (selection) => {
			console.log("drawMove", selection)
		})
		canvasPlot.on("select", (selection) => {
			console.log("select", selection)
		})
		canvasPlot.on("dragPlotMove", (selection) => {
			console.log("dragPlotMove", selection)
		})
		canvasPlot.on("zoom", (offset) => {
			console.log("zoom", offset)
		})
		canvasPlot.on("dblclick", (selection) => {
			console.log("dblclick", selection)
		})
		canvasPlot.on("rightClick", (selection) => {
			console.log("rightClick", selection)
		})
	</script>
</body>

</html>