<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<button>增加</button>
<button id='getpointarr'>获取坐标</button>
<canvas id="canvas" width="1000" height="1000"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
if (canvas) {
var pointarr = [{
start: { x: 520, y: 10 },
c1: { x: 20, y: 50 },
c2: { x: 820, y: 150 },
end: { x: 520, y: 200 }
}]
var ctx = canvas.getContext('2d');
var ctx2 = canvas2.getContext('2d');
//绘制出控制点
function draw_control() {
for (var i = 0; i < pointarr.length; i++) {
var { start, c1, c2, end } = pointarr[i];
ctx.strokeStyle = "#7fb069";
ctx.beginPath();
//绘制c1点与start点的连线
ctx.moveTo(start.x, start.y);
ctx.lineTo(c1.x, c1.y);
//绘制c2点与end点的连线
ctx.moveTo(c2.x, c2.y);
ctx.lineTo(end.x, end.y);
ctx.stroke()
ctx.closePath();
ctx.fillStyle="#e6aa68"
//绘制start点
ctx.moveTo(start.x, start.y);
ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);
ctx.fill()
//绘制c1点
ctx.moveTo(c1.x, c1.y);
ctx.arc(c1.x, c1.y, 10, 0, 2 * Math.PI);
ctx.fill()
//绘制c2点
ctx.moveTo(c2.x, c2.y);
ctx.arc(c2.x, c2.y, 10, 0, 2 * Math.PI);
ctx.fill()
//绘制end点
ctx.moveTo(end.x, end.y);
ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);
ctx.fill()
}
}
//绘制贝塞尔曲线
function draw_line() {
for (var i = 0; i < pointarr.length; i++) {
var point = pointarr[i];
ctx.beginPath();
ctx.moveTo(point.start.x, point.start.y);
ctx.bezierCurveTo(point.c1.x, point.c1.y, point.c2.x, point.c2.y, point.end.x, point.end.y);
ctx.strokeStyle = "#ca3c25";
ctx.lineWidth = 2;
ctx.stroke();
}
}
draw()
function draw() {
draw_line();
draw_control()
}
//移动控制点
canvas.onmousedown = function (e) {
// movementx,layer
// if(e.layerX)
// 判断选中的是哪个控制点
var index, name;
for (var i = 0; i < pointarr.length; i++) {
index = i
var { start, c1, c2, end } = pointarr[i];
var tag = Math.abs(start.x - e.layerX) <= 5 && Math.abs(start.y - e.layerY) <= 5;
if (tag) {
name = 'start'
break;
}
var tag1 = Math.abs(c1.x - e.layerX) <= 10 && Math.abs(c1.y - e.layerY) <= 10;
if (tag1) {
name = 'c1'
break;
}
var tag2 = Math.abs(c2.x - e.layerX) <= 10 && Math.abs(c2.y - e.layerY) <= 10;
if (tag2) {
name = 'c2';
break;
}
var tag3 = Math.abs(end.x - e.layerX) <= 5 && Math.abs(end.y - e.layerY) <= 5;
if (tag3) {
name = 'end';
break;
}
}
if(!name){
return
}
var { x, y } = pointarr[index][name];
var space = { x: e.layerX - x, y: e.layerY - y };
this.onmousemove = function (e) {
//根据鼠标与控制点的关系得到新的控制点的坐标
if (name) {
// var {x,y} = pointarr[index][name]
x = e.layerX - space.x;
y = e.layerY - space.y;
pointarr[index][name] = { x, y };
var nxt = index + 1
if (name == 'end' && pointarr[nxt]) {
pointarr[nxt]['start'] = { x, y };
}
ctx.clearRect(0, 0, canvas.width, canvas.height)
//绘制新的效果图
draw()
}
}
}
canvas.onmouseup = function () {
this.onmousemove = function (e) {
}
}
var btn = document.getElementsByTagName('button')[0];
//新增贝塞尔曲线
btn.onclick = function () {
var i = pointarr.length - 1;
var { start, end, c1, c2 } = JSON.parse(JSON.stringify(pointarr[i]));
var dis = end.y - start.y
start = JSON.parse(JSON.stringify(end));
end.y = end.y + dis;
c1.y = c1.y + dis;
c2.y = c2.y + dis;
var point = { start, c1, c2, end };
pointarr.push(point);
draw()
}
getpointarr.onclick = function () {
can(pointarr);
}
function can (obpointarrj) {
ctx2.clearRect(0, 0, canvas.width, canvas.height)
pointarr.forEach((item) => {
ctx2.beginPath();
ctx2.moveTo(item.start.x, item.start.y);
ctx2.bezierCurveTo(item.c1.x, item.c1.y, item.c2.x, item.c2.y, item.end.x, item.end.y);
ctx2.strokeStyle = "#ca3c25";
ctx2.lineWidth = 2;
ctx2.stroke();
})
};
} else {
document.writeln("浏览器不支持canvas组件");
}
}
</script>
</body>
</html>
获取贝塞尔曲线控制点坐标
最新推荐文章于 2023-10-17 00:00:58 发布