1. 功能描述
拖拽四个顶点放大缩小,点击框内部可以拖拽位置。使用的是canvas。
2. 效果图
3. 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<style>
.bg {
opacity: 0.2;
width: 500px;
height: 500px;
}
.bg img {
width: 100%;
height: 100%;
}
.canvas-box {
margin-left: 100px;
position: absolute;
left: 0;
top: 0;
text-align: center;
}
#tutorial {
}
</style>
</head>
<body>
<div class="bg">
<img src="./images/wangge.png" />
</div>
<div class="canvas-box">
<canvas id="tutorial" width="300" height="300">
<img src="./images/1.jpg" />
</canvas>
</div>
<script type="text/javascript">
var lineArr = [
{ x: 100, y: 100, text: 'A' },
{ x: 100, y: 250, text: 'B' },
{ x: 400, y: 250, text: 'C' },
{ x: 400, y: 100, text: 'D' }
]
let mouseDown = false,
isMoving = false,
draggedEntity = null,
draggedPoint = null,
canvas = null,
cvsCtx = null,
selectionRadius = 6 * 6
function resizeDraw(params) {
clearDraw()
draw()
}
function clearDraw(params) {
$('#tutorial').attr({ width: 500, height: 500 })
canvas = document.getElementById('tutorial')
}
function isPointInPath(Polygon, Point) {
var CrossNum = 0
for (let i = 0; i < Polygon.length; i++) {
var p1 = Polygon[i],
p2 = Polygon[(i + 1) % Polygon.length]
if (p1.y == p2.y || Point.y < Math.min(p1.y, p2.y) || Point.y >= Math.max(p1.y, p2.y)) {
continue
}
var x = ((Point.y - p1.y) * (p2.x - p1.x)) / (p2.y - p1.y) + p1.x
if (x > Point.x) {
CrossNum++
}
}
return CrossNum % 2 == 1
}
function draw(params) {
if (!canvas.getContext) return false
cvsCtx = canvas.getContext('2d')
cvsCtx.lineWidth = 2
cvsCtx.strokeStyle = '#e2a62b'
cvsCtx.save()
cvsCtx.moveTo(100, 100)
cvsCtx.beginPath()
for (let i = 0; i < lineArr.length; i++) {
cvsCtx.lineTo(lineArr[i].x, lineArr[i].y)
}
cvsCtx.closePath()
cvsCtx.stroke()
for (let i = 0; i < lineArr.length; i++) {
cvsCtx.beginPath()
cvsCtx.arc(lineArr[i].x, lineArr[i].y, 6, 0, Math.PI * 2, true)
cvsCtx.fillStyle = '#0053d9'
cvsCtx.fill()
cvsCtx.closePath()
cvsCtx.stroke()
cvsCtx.restore()
cvsCtx.font = '20px Arial'
cvsCtx.fillStyle = '#2f71ad'
cvsCtx.textAlign = 'left'
cvsCtx.fillText(lineArr[i].text, lineArr[i].x, lineArr[i].y)
}
}
;(function () {
resizeDraw()
$('#tutorial').on('mousemove', e => {
e.stopPropagation()
if (mouseDown && draggedEntity) {
for (let i = 0; i < lineArr.length; i++) {
if (lineArr[i].text == draggedEntity.text) {
// let off = canvas.getBoundingClientRect() || getClientRect()
let tmpPoint = { ...lineArr[i] }
lineArr[i].x = e.offsetX
lineArr[i].y = e.offsetY
let preIndex = i - 1 >= 0 ? i - 1 : lineArr.length - 1
let nextIndex = i + 1 <= lineArr.length - 1 ? i + 1 : 0
lineArr[preIndex].y == tmpPoint.y
? (lineArr[preIndex].y = e.offsetY)
: (lineArr[preIndex].x = e.offsetX)
lineArr[nextIndex].y == tmpPoint.y
? (lineArr[nextIndex].y = e.offsetY)
: (lineArr[nextIndex].x = e.offsetX)
break
}
}
resizeDraw()
}
if (isMoving && draggedPoint) {
lineArr.forEach(point => {
point.x += e.offsetX - draggedPoint.x
point.y += e.offsetY - draggedPoint.y
})
draggedPoint = { x: e.offsetX, y: e.offsetY }
resizeDraw()
}
})
$('#tutorial').on('mousedown', e => {
mouseDown = true
let entity = null
// 判断是否在圆角内或圆角上
for (let i = 0; i < lineArr.length; i++) {
let x = e.offsetX - lineArr[i].x
let y = e.offsetY - lineArr[i].y
if (x * x + y * y <= selectionRadius) {
entity = lineArr[i]
continue
}
}
draggedEntity = entity
if (!draggedEntity && isPointInPath(lineArr, { x: e.offsetX, y: e.offsetY })) {
isMoving = true
draggedPoint = { x: e.offsetX, y: e.offsetY }
}
})
$('#tutorial').on('mouseup', e => {
mouseDown = false
draggedEntity = null
isMoving = false
draggedPoint = null
})
})()
</script>
</body>
</html>
<!--
canvas简易版 已知四个点绘制矩形,并且顶点拖动
https://blog.csdn.net/weixin_43843679/article/details/115867883
canvas 多个图形可视化操作:拖拽、缩放、旋转
https://juejin.cn/post/6894433110491201543
canvas四个点画矩形,中垂线,以及顶点拖拽
https://blog.csdn.net/weixin_43843679/article/details/115867385
canvas简易版 已知四个点绘制矩形,并且顶点拖动
https://blog.csdn.net/weixin_43843679/article/details/115867883
-->
4. 资料图片
images/wangge.jpg
images/1.jpg