获取贝塞尔曲线控制点坐标

最新推荐文章于 2022-07-28 16:25:05 发布

李zhuang

最新推荐文章于 2022-07-28 16:25:05 发布

阅读量1.1k

点赞数

分类专栏：前端

原文链接：https://blog.csdn.net/O0_0O__/article/details/108320247

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>

李zhuang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
获取贝塞尔曲线控制点坐标

<!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></he
复制链接

扫一扫