JavaScirpt Canvas画四边形,移动顶点可以改变形状

素颜马尾好姑娘i 2022-09-10 02:15 150阅读 0赞

直接上代码：

<!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>canvas画四边形</title>
    </head>
     
    <body>
        <div>
            <canvas id="canvas" width="400" height="600"></canvas>
        </div>
        <script>
     
            window.onload = function () {
                var canvas = document.getElementById('canvas')
                context = canvas.getContext('2d')
                drawRects()
                canvas.onmousedown = clickPoint;
                canvas.onmouseup = stopDragging;
                canvas.onmousemove = dragCircle
                canvas.onmouseout = stopDragging;
            }
     
            var points = {
                rect1: [
                    { x: 20, y: 20, isSelected: false },
                    { x: 220, y: 20, isSelected: false },
                    { x: 220, y: 230, isSelected: false },
                    { x: 20, y: 220, isSelected: false },
                ],
                rect2: [
                    { x: 10, y: 10, isSelected: false },
                    { x: 320, y: 10, isSelected: false },
                    { x: 320, y: 320, isSelected: false },
                    { x: 10, y: 320, isSelected: false },
                ]
            }
     
            // 画图
            function drawRect(Array) {
                // 设置线的样式
                // context.setLineDash([4, 2])
                // 设置连线点样式
                context.lineJoin  = 'round'
                context.beginPath()
                // 遍历坐标点
                for (let i = 0; i < Array.length; i++) {
                    const ele = Array[i];
                    if (i < 1) {
                        context.moveTo(ele.x, ele.y);
                    } else {
                        context.lineTo(ele.x, ele.y);
                    }
                }
                context.lineWidth = 3;
                // 判断显示不同颜色的四边形
                if(Array == points.rect1){
                    context.strokeStyle ='red'
                }else{
                    context.strokeStyle ='green'
                }
                // 随机颜色
                // context.strokeStyle = '#'+(Math.random()*0xffffff<<0).toString(16); 
                context.closePath();
                context.stroke();
            }
     
            // 画点连线
            function drawRects() {
                // 清除画布，准备绘制
                context.clearRect(0, 0, canvas.width, canvas.height);
                drawRect(points.rect1)
                drawRect(points.rect2)
            }
     
            // 遍历元素在哪一个圆上
            var  selectObject
            function circle(Array, clientX, clientY) {
                for (let i = 0; i < Array.length; i++) {
                    const ele = Array[i];
                    // Math.abs返回绝对值
                    // Math.sqrt返回一个数的平方根
                    // Math.pow幂函数运算
                    var line = Math.abs(Math.sqrt(Math.pow((ele.x - clientX), 2) + Math.pow((ele.y - clientY), 2)))
                    // 判断点击的位置在哪一个圆里面
                    if (line - 5 < 0) {
                        ele.isSelected = true
                        isDragging = true
                        selectObject = Array[i]
                    } else {
                        ele.isSelected = false
                    }
                    
                }
            }
     
            // Canvas点击事件
            // 遍历所有的坐标点
            function clickPoint(e) {
                // 屏幕事件
                var ev = window.event || ev;
                // 判断屏幕，减去屏幕中的偏移量
                //offsetLeft会受父级的position属性影响,同理offsetTop也会
                var clientX = ev.clientX - this.offsetLeft; 
                var clientY = ev.clientY - this.offsetTop;
                circle(points.rect1, clientX, clientY)
                circle(points.rect2, clientX, clientY)
            }
     
            var isDragging = false
            function dragCircle(e) {
                // 判断是否可以拖动
                if (isDragging == true) {
                     // 取得画布上被点击的点
                    //offsetLeft会受父级的position属性影响,同理offsetTop也会
                    var clickX = e.pageX - canvas.offsetLeft;
                    var clickY = e.pageY - canvas.offsetTop;
                    selectObject.x = clickX
                    selectObject.y = clickY
                    drawRects()
                }
            }
     
            // 停止拖动事件
            function stopDragging() {
                isDragging = false
                // 鼠标结束时的坐标
                console.log(points)
            }
     
     
        </script>
    </body>
     
    </html>