贝塞尔曲线绘制动态轨迹和canvas绘制两点之间的直线,两种方式,做下记录:
<template>
<div class="testBeiSaiEr">
<div class='a'></div>
<div></div>
<div class='b'></div>
<!-- <canvas id="c1" :width="warehousesWidth" :height="warehousesHeight"></canvas> -->
<div class="drawing-container">
<canvas id="canvas"></canvas>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component({ components: {} })
export default class testBeiSaiEr extends Vue {
name = 'testBeiSaiEr'
mounted() {
this.$nextTick(() => {
// this.loadCanvas()
this.load()
})
}
load() {
var canvas = document.getElementById('canvas') as any
var ctx = canvas?.getContext('2d')
// function canvasResize(){
// canvas.width=$(".drawing-container").width();
// canvas.height=$(".drawing-container").height();
// }
// canvasResize();
// $(window).resize(function(){
// canvasResize();
// });
/*
画动态直线
@(x1,y1) 起点
@(x2,y2) 终点
*/
function drawDynamicLine(x1: any, y1: any, x2: any, y2: any) {
if (x1 == x2) {
drawVerticalLine(x1, y1, x2, y2) /*斜率不存在的情况*/
} else {
drawCommonLine(x1, y1, x2, y2) /*斜率为正或者负或者0*/
}
/*k存在的情况*/
function drawCommonLine(x1: any, y1: any, x2: any, y2: any) {
//y=kx+b
var k = (y2 - y1) / (x2 - x1) //斜率k 正 负 0
var b = y1 - k * x1 //常数b
var i = 0
var flag = compare(x1, x2)
function draw() {
var xi = x1 + i
var yi = k * xi + b
var xj = x1 + i + 20 //控制步长决定绘制的是虚线还是实线
var yj = k * xj + b
drawLine(xi, yi, xj, yj)
i += 20 * flag
if (Math.abs(i) <= Math.abs(x1 - x2)) {
window.setTimeout(function () {
draw()
}, 50)
}
}
draw()
}
/*k不存在,也就是垂直的情况*/
function drawVerticalLine(x1: any, y1: any, x2: any, y2: any) {
var i = 0
var flag = compare(y1, y2)
function draw() {
var yi = y1 + i
var yj = y1 + i + 5 * flag
drawLine(x1, yi, x2, yj)
i += 20 * flag
if (Math.abs(i) <= Math.abs(y1 - y2)) {
window.setTimeout(function () {
draw()
}, 50)
}
}
draw()
}
/*比较函数*/
function compare(a: any, b: any) {
if (a < b) {
return 1
} else {
return -1
}
}
/*线条片段*/
function drawLine(x1: any, y1: any, x2: any, y2: any) {
ctx.beginPath()
ctx.moveTo(x1, y1)
ctx.lineTo(x2, y2)
ctx.lineWidth = 1
ctx.strokeStyle = 'white'
ctx.stroke()
ctx.closePath()
}
/*清除画布*/
function clear() {
ctx.clearRect(0, 0, 800, 800)
}
}
drawDynamicLine(10, 10, 400, 10)
// drawDynamicLine(400, 100, 400, 800)
// drawDynamicLine(400, 800, 400, 800)
// drawDynamicLine(400, 800, 100, 800)
// drawDynamicLine(100, 800, 100, 100)
// drawDynamicLine(100, 100, 400, 800)
}
/** 绘制动态曲线 */
// loadCanvas() {
// const startObj = { x: 0, y: 0 }
// // +5 是起点和终点icon小点的宽高一半
// startObj.x = 10 + 5
// startObj.y = 30 + 5
// const endObj = { x: 0, y: 0 }
// endObj.x = 100 + 5
// endObj.y = 50 + 5
// console.log(startObj, endObj)
// function animate() {
// ctx?.clearRect(0, 0, 2000, 2000)
// ctx?.beginPath()
// drawCurvePath(ctx, [startObj.x, startObj.y], [endObj.x, endObj.y], 0.2, percent)
// ctx?.stroke()
// percent = (percent + 1) % 100
// requestAnimationFrame(animate)
// }
// function drawCurvePath(ctx: any, start: any, end: any, curveness: number, percent: number) {
// const cp = [(start[0] + end[0]) / 2 - (start[1] - end[1]) * curveness, (start[1] + end[1]) / 2 - (end[0] - start[0]) * curveness]
// const t = percent / 100
// const p0 = start
// const p1 = cp
// const p2 = end
// const v01 = [p1[0] - p0[0], p1[1] - p0[1]] // 向量<p0, p1>
// const v12 = [p2[0] - p1[0], p2[1] - p1[1]] // 向量<p1, p2>
// const q0 = [p0[0] + v01[0] * t, p0[1] + v01[1] * t]
// const q1 = [p1[0] + v12[0] * t, p1[1] + v12[1] * t]
// const v = [q1[0] - q0[0], q1[1] - q0[1]] // 向量<q0, q1>
// const b = [q0[0] + v[0] * t, q0[1] + v[1] * t]
// ctx.moveTo(p0[0], p0[1])
// ctx.quadraticCurveTo(q0[0], q0[1], b[0], b[1])
// }
// const canvas = document.getElementById('c1') as HTMLCanvasElement
// const c2D = canvas.getContext('2d')
// if (canvas) {
// // @ts-ignore
// var ctx = canvas.getContext('2d')
// if (ctx) {
// ctx.lineWidth = 2
// ctx.strokeStyle = '#6696ec'
// ctx.beginPath()
// var percent = 0
// animate()
// drawCurvePath(ctx, [5, 10], [endObj.x, endObj.y], 0.4, percent)
// ctx.stroke()
// }
// }
// }
}
</script>
<style lang="scss" scoped>
.testBeiSaiEr {
width: 500rem;
height: 500rem;
border: 0.1rem solid green;
position: relative;
margin-left: 5rem;
.a {
width: 1rem;
height: 1rem;
position: absolute;
border-radius: 50%;
background-color: rgb(38, 255, 0);
left: 10px;
top: 30px;
}
.b {
width: 1rem;
height: 1rem;
position: absolute;
border-radius: 50%;
background-color: rgb(162, 0, 255);
left: 100px;
top: 50px;
}
}
.drawing-container {
width: 100%;
height: 1000px;
}
#canvas {
display: block;
background-color: rgb(12, 15, 33);
// width: 500px;
}
</style>