[实操题]输入一条 polyline，输出 polyline 的中点 #240
Comments
扫描下方二维码，获取答案以及详细解析，同时可解锁800+道前端面试题。
|
👉点击预览效果<!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>
<style>
#canvas {
background-color: rgb(71, 73, 75);
}
#button {
position: fixed;
right: 0;
top: 10px;
height: 60px;
}
</style>
</head>
<body>
<script>
// [实操题]输入一条 polyline，输出 polyline 的中点
// 算法：输入一条polyline，输出polyline的中点
// 绘制：在浏览器中绘制出polyline和中点
// 说明：中点是指沿着polyline，到polyline的起点和终点，距离相等，中点要求在polyline上
// 输入：[[10, 20], [20, 200], [30, 220], [40, 300], [100, 400]]，以[10, 20]举例，10代表x坐标，20代表y坐标，单位是像素
// 要求：提供源代码，用原生JavaScript实现，不使用任何框架、类库、构建工具，本地打开html文件可直接看到效果
</script>
<canvas id="canvas" width="2000" height="2000"></canvas>
<button id="button">Add a random point</button>
<script>
let globalCtx = null
function fn(points) {
if (!Array.isArray(points) || !points.length) return
const canvas = document.getElementById('canvas')
let ctx = null
if (canvas.getContext) {
globalCtx = ctx = canvas.getContext('2d')
drawLine(ctx, points)
const sList = []
let prePoint = points[0]
for (let i = 1; i < points.length; i++) {
sList.push(getInfoOfStraightLine(prePoint, points[i]))
prePoint = points[i]
}
const lineLength = sList.reduce((l, cur) => l + cur.len, 0)
const halfLength = lineLength / 2
let s = 0
let index = 0
let point
while (s < halfLength) {
s += sList[index].len
point = points[index + 1]
if (s === halfLength) {
drawMidPonit(ctx, [point[0], point[1]])
} else if (s < halfLength) {
index++
continue
} else {
let d = s - halfLength
let x = d * sList[index].x
let y = d * sList[index].y
let coordinate = [point[0] - x, point[1] - y]
drawMidPonit(ctx, coordinate)
break
}
}
}
function drawLine(ctx, points) {
ctx.strokeStyle = 'red'
ctx.beginPath()
ctx.moveTo(...points[0])
for (let i = 1; i < points.length; i++) {
ctx.lineTo(...points[i])
}
ctx.stroke()
}
function getInfoOfStraightLine(point1, point2) {
const a = point2[0] - point1[0]
const b = point2[1] - point1[1]
const len = Math.sqrt(a * a + b * b)
return {
len,
x: a / len,
y: b / len
}
}
function drawMidPonit(ctx, coordinate) {
ctx.strokeStyle = "#fff"
ctx.beginPath();
ctx.moveTo(coordinate[0], coordinate[1])
ctx.arc(coordinate[0], coordinate[1], 3, 0, 2 * Math.PI);
ctx.stroke();
}
}
let nums = [[10, 20], [20, 200], [30, 220], [40, 300], [100, 400]]
fn(nums)
const btn = document.getElementById('button')
btn.addEventListener('click', function () {
globalCtx.clearRect(0, 0, 2000, 2000)
const last = nums[nums.length - 1]
const flag = Math.random() > 0.5 ? 1 : -1
const x = Math.random() * 100 + last[0]
const y = Math.random() * 100 * flag + last[1]
nums.push([x, y])
fn(nums)
})
</script>
</body>
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The text was updated successfully, but these errors were encountered: