动态绘制矩形和多边形

最新推荐文章于 2024-05-24 14:15:29 发布
最新推荐文章于 2024-05-24 14:15:29 发布
阅读量587 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42335551/article/details/86163318
版权 

@{
    ViewBag.Title = "DouBianxing";
}

<h2>动态绘制矩形和多边形</h2>
    <canvas id="canvas" style="border:1px solid #bdb9b9; margin:0px auto;" width="300" height="300"></canvas>
    <div >
        <button class="btn btn-sm btn-success" type="button" onclick="Hua()" name="Hua">
            <i class="fa fa-square-o"></i> <span class="bold"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">绘制矩形</font></font></span>
        </button>
        <button class="btn btn-sm btn-success" type="button" onclick="PingYiHua()" name="PingYiHua">
            <i class="fa fa-square-o"></i><span class="bold"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&nbsp;平移矩形</font></font></span>
        </button>
        <button class="btn btn-sm btn-success" type="button" onclick="SuoFangHua()" name="SuoFangHua">
            <i class="fa fa-square-o"></i><span class="bold"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&nbsp;缩放矩形</font></font></span>
        </button>
        <button class="btn btn-sm btn-success" type="button" onclick="HuaDuoBianXing()" name="HuaDuoBianXing">
            <i class="fa fa-star-o"></i> <span class="bold"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">绘制多边形</font></font></span>
        </button>
        <button class="btn btn-sm btn-success" type="button" onclick="SuoFHuaDuoBianXing()" name="SuoFHuaDuoBianXing">
            <i class="fa fa-star-o"></i> <span class="bold"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">缩放多边形</font></font></span>
        </button>
        <button class="btn btn-sm btn-success" type="button" onclick="PingYHuaDuoBianXing()" name="SuoFHuaDuoBianXing">
            <i class="fa fa-star-o"></i> <span class="bold"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">平移多边形</font></font></span>
        </button>
  
        <button class="btn btn-sm btn-success" type="button" onclick="ClerShape()" name="ClerShape">
            <i class="fa fa-star-o"></i> <span class="bold"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">清空画布</font></font></span>
        </button>
    </div>
<div>
    <div class="col-lg-7">
        <button class="btn btn-sm btn-success" type="button" onclick="IHuaDuoBianXing()" name="IHuaDuoBianXing">
            <i class="fa fa-star-o"></i> <span class="bold"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">绘制忽略区</font></font></span>
        </button>
        <button class="btn btn-sm btn-success" type="button" onclick="IDeleteHuaDuoBianXing()" name="IDeleteHuaDuoBianXing">
            <i class="fa fa-star-o"></i><span class="bold"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&nbsp;删除忽略区</font></font></span>
        </button>
        <button class="btn btn-sm btn-success" type="button" onclick="IPingYiHuaDuoBianXing()" name="IPingYiHuaDuoBianXing">
            <i class="fa fa-star-o"></i><span class="bold"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&nbsp;平移忽略区</font></font></span>
        </button>
        <button class="btn btn-sm btn-success" type="button" onclick="ISuoFangDuoBianXing()" name="ISuoFangDuoBianXing">
            <i class="fa fa-star-o"></i><span class="bold"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&nbsp;缩放忽略区</font></font></span>
        </button>
    </div>
    <div class="col-lg-5">
        <button class="btn btn-sm btn-success" type="button" onclick="IClerJuXHua()" name="IClerJuXHua">
            <i class="fa fa-trash-o"></i> <span class="bold"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">清除忽略区</font></font></span>
        </button>
    </div>
</div>
<script>
 

    //var a = -1;
    //var b = -2;
    //alert(eval( a+b))
    var can = document.getElementById("canvas");
    var ctx = can.getContext("2d");
    function DuoXY(X, Y) {
        this.x = X;
        this.y = Y;
    }
    var optionD = false;//不存在多边形
    var isActionKuang = -1;
    function HuaDuoBianXing() {
        if (optionD || operation) {
            toastr.info("已存在敏感区");
            return;
        }
        can.onmousedown = function (e) {
            if (!optionD) {
                //  alert(polygondata.length)
                Close();
                e = e || window.event;
                Jx = e.offsetX || e.layerX;//起点的X坐标
                Jy = e.offsetY || e.layerY;//起点的Y坐标
                //alert(Jx + " " + Jy);
                //X.push(Jx), Y.push(Jy)
                polygondata.push(new DuoXY(Jx, Jy));
                if (polygondata.length >= 2) {
                    if ((polygondata[0].x - 10) < Jx && Jx < (parseInt(polygondata[0].x) + 10) && (polygondata[0].y - 10) < Jy && Jy < (parseInt(polygondata[0].y) + 10)) {
                        //X.pop(); Y.pop();
                        polygondata.pop();
                        Close();
                        huaBiHeDuoBianXing(polygondata);
                        can.onmousedown = null;//重置
                        allgraph();
                        optionD = true;
                    } else {
                        Close();
                        DuoBianXing(polygondata);
                        allgraph();
                    }
                }
            };
        }
    }
    缩放多边形
    function SuoFHuaDuoBianXing() {
        can.onmousedown = function (e) {
            e = e || window.event;
            DanJiX = e.offsetX || e.layerX;//点击的X坐标
            DanJiY = e.offsetY || e.layerY;//点击的Y坐标
            //循环数组
            for (var i = 0; i < polygondata.length; i++) {
                //判断单击的点坐标是否在顶点上
                if ((parseInt(polygondata[i].x) + parseInt(10)) >= DanJiX && DanJiX >= (parseInt(polygondata[i].x) - 10) && DanJiY >= (parseInt(polygondata[i].y - 10)) && DanJiY <= (parseInt(polygondata[i].y) + parseInt(10))) {
                    var pointX = polygondata[i].x; var pointY = polygondata[i].y;//获取单击某一个的坐标
                    var n = i;
                    can.onmousemove = function (e) {
                        pingyiDX = e.offsetX || e.layerX;//平移的X坐标
                        pingyiDY = e.offsetY || e.layerY;//平移的Y坐标
                        //平移是否超出画布界限（X和Y）?（已解决）
                        if (10 <= pingyiDX && parseInt(pingyiDX) <= can.width && 10 <= pingyiDY && parseInt(pingyiDY) <= can.height) {
                            Close();
                            ctx.beginPath();
                            ctx.strokeStyle = "black";
                            ctx.moveTo(pingyiDX, pingyiDY);
                            active(pingyiDX, pingyiDY)
                            //alert("n:"+n)
                            if (n > 0) {
                                var linshipolygondata = [];
                                for (var i = 0; i < n; i++) {
                                    linshipolygondata.push(new DuoXY(polygondata[i].x, polygondata[i].y));
                                }
                                polygondata.splice(0, n)
                                polygondata = polygondata.concat(linshipolygondata)
                            }
                            for (var i = 0; i < polygondata.length; i++) {
                                ctx.lineTo(polygondata[i].x, polygondata[i].y);
                                active(polygondata[i].x, polygondata[i].y)
                            }
                            ctx.lineJoin = "round"; //线条与线条之间的连接方式
                            ctx.closePath();//表示动作完毕
                            ctx.stroke();
                            //ctx.fillStyle = "#D1E9E9";//填充的颜色
                            ctx.fillStyle = "rgba(0,255,0,0.2)";//填充的颜色
                            ctx.fill();//填充
                            polygondata[0].x = pingyiDX; polygondata[0].y = pingyiDY;
                            n = 0;
                        }
                    }
                    //结束重新绘制
                    can.onmouseup = function () {
                        Close();
                        optionD = true;
                        allgraph();
                        //can.onmousedown = null;
                        can.onmousemove = null;
                    }
                    break;
                }
            }
        }
    }
    //平移多边形
    function PingYHuaDuoBianXing() {
        var ArrayX = []; var ArrayY = [];
        console.warn("多边形数据");
        console.warn(polygondata);
        //循环数组     
        for (var i = 0; i < polygondata.length; i++) {
            ArrayX.push(polygondata[i].x); ArrayY.push(polygondata[i].y);
        }
        //最大值//最小值
        var minx = Math.min.apply(null, ArrayX); var maxx = Math.max.apply(null, ArrayX);
        //最大值//最小值
        var miny = Math.min.apply(null, ArrayY); var maxy = Math.max.apply(null, ArrayY);
        can.onmousedown = function (e) {
            e = e || window.event;
            DanJiX = e.offsetX || e.layerX;//点击的X坐标
            DanJiY = e.offsetY || e.layerY;//点击的Y坐标
            if (DanJiX >= parseInt(minx) && DanJiY >= parseInt(miny) && DanJiY <= parseInt(maxy) && DanJiX <= parseInt(maxx)) {
                can.onmousemove = function (e) {
                    pingyiDX = e.offsetX || e.layerX;//平移的X坐标
                    pingyiDY = e.offsetY || e.layerY;//平移的Y坐标
                    console.warn("pingyiDX:" + pingyiDX + "DanJiX:" + DanJiX); console.warn("pingyiDY:" + pingyiDY+"DanJiY:"+DanJiY);
                    console.warn("X方向的位移:" + (pingyiDX-DanJiX));  console.warn("Y方向的位移:" + (pingyiDY-DanJiY));
                    if (10 <= pingyiDX && parseInt(pingyiDX) <= can.width && 10 <= pingyiDY && parseInt(pingyiDY) <= can.height) {
                        var xiangduiX = pingyiDX - DanJiX; var xiangduiY = pingyiDY - DanJiY;
                        DanJiX = pingyiDX; DanJiY = pingyiDY;
                        Close();
                        for (var i = 0; i < polygondata.length; i++) {
                            polygondata[i].x = eval(polygondata[i].x + xiangduiX);
                            console.warn(polygondata[i].x);
                            polygondata[i].y = eval(polygondata[i].y + xiangduiY);
                            console.warn(polygondata[i].y);
                        }
                        allgraph();
                    }
                }
                //结束重新绘制
                can.onmouseup = function () {
                    Close();
                    optionD = true;
                    allgraph();
                    //can.onmousedown = null;
                    can.onmousemove = null;
                }
           
            }
        }
    }

    //平移矩形
    function PingYiHua() {
        can.onmousedown = function (e) {
            e = e || window.event;
            DanJiX = e.offsetX || e.layerX;//点击的X坐标
            DanJiY = e.offsetY || e.layerY;//点击的Y坐标
            if (datarectangle != null) {
                //判断单击的点坐标是否在矩形上
                if (DanJiX >= datarectangle.x && DanJiX <= (parseInt(datarectangle.x) + parseInt(datarectangle.w)) && DanJiY >= datarectangle.y && DanJiY <= (parseInt(datarectangle.y) + parseInt(datarectangle.h))) {
                    can.onmousemove = function (e) {
                        pingyiJiX = e.offsetX || e.layerX;//平移的X坐标
                        pingyiJiY = e.offsetY || e.layerY;//平移的Y坐标
                        //平移是否超出画布界限（X和Y）?（已解决）
                        if (10 <= pingyiJiX - (datarectangle.w / 2).toFixed(0) && parseInt(pingyiJiX - (datarectangle.w / 2).toFixed(0)) + parseInt(datarectangle.w) <= can.width && 10 <= pingyiJiY - (datarectangle.h / 2).toFixed(0) && parseInt(pingyiJiY - (datarectangle.h / 2).toFixed(0)) + parseInt(datarectangle.h) <= can.height) {
                            //重新绘制
                            Getredraw();
                            ctx.fillRect(pingyiJiX - (datarectangle.w / 2).toFixed(0), pingyiJiY - (datarectangle.h / 2).toFixed(0), datarectangle.w, datarectangle.h);
                            ctx.strokeRect(pingyiJiX - (datarectangle.w / 2).toFixed(0), pingyiJiY - (datarectangle.h / 2).toFixed(0), datarectangle.w, datarectangle.h);
                            //带来的问题改变了原来的（X坐标和Y坐标）？(已解决)
                            datarectangle.x = pingyiJiX - (datarectangle.w / 2).toFixed(0);
                            datarectangle.y = pingyiJiY - (datarectangle.h / 2).toFixed(0);
                            var linshi = new DateInfo(pingyiJiX - (datarectangle.w / 2).toFixed(0), pingyiJiY - (datarectangle.h / 2).toFixed(0), datarectangle.w, datarectangle.h)
                            GetActive(linshi);
                        }
                    }
                    //结束重新绘制
                    can.onmouseup = function () {
                        Close();
                        allgraph();
                        operation = true
                        //can.onmousedown = null;
                        can.onmousemove = null;
                    }
                }
            }
        }
    }

    /*画闭合多边形 */
    function huaBiHeDuoBianXing(polygondata) {
        ctx.beginPath();
        ctx.strokeStyle = "black";
        ctx.moveTo(polygondata[0].x, polygondata[0].y);
        active(polygondata[0].x, polygondata[0].y);
        for (var i = 1; i < polygondata.length; i++) {
            //alert(polygondata[i].x+":"+ polygondata[i].y)
            ctx.lineTo(polygondata[i].x, polygondata[i].y);
            active(polygondata[i].x, polygondata[i].y);
        }
        ctx.lineJoin = "round"; //线条与线条之间的连接方式
        ctx.closePath();//表示动作完毕
        ctx.stroke();
        ctx.fillStyle = "rgba(0,255,0,0.2)";;//填充的颜色
        ctx.fill();//填充

    }
    /*拼接点线*/
    function DuoBianXing(polygondata) {
        ctx.strokeStyle = "black";
        ctx.moveTo(polygondata[0].x, polygondata[0].y);
        for (var i = 1; i < polygondata.length; i++) {
            ctx.lineTo(polygondata[i].x, polygondata[i].y);
        }
        ctx.lineJoin = "round"; //线条与线条之间的连接方式
        ctx.stroke();
    }
    var Jx = null;
    var Jy = null;
    var Jw = null;
    var Jh = null;
    var polygondata = [];//
    var datarectangle = null;
    //是否有画矩形框的动作
    var operation = false
    //创建矩形对象
    function DateInfo(x, y, w, h) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    }
    function Hua() {
        if (optionD || operation) {
            toastr.info("已存在敏感区");
            return;
        }
        can.onmousedown = function (e) {
            Close();
            optionD = false
            polygondata = [];
            e = e || window.event;
            Jx = e.offsetX || e.layerX;//起点的X坐标
            Jy = e.offsetY || e.layerY;//起点的Y坐标
            //绘制过程
            can.onmousemove = function (e) {
                e = e || window.event;
                if ((e.offsetX || e.layerX) > Jx && (e.offsetY || e.layerY) > Jy) {//左上角
                    Jw = (e.offsetX || e.layerX) - Jx
                    Jh = (e.offsetY || e.layerY) - Jy;
                }
                Getredraw();
                ctx.fillRect(Jx, Jy, Jw, Jh);
                ctx.strokeRect(Jx, Jy, Jw, Jh);
                allgraph();
            }
            // 绘制结束
            can.onmouseup = function (e) {
                //  alert($("#ObjectName").val());
                //polygondata.push(new DateInfo(Jx, Jy, Jw, Jh));
                datarectangle = new DateInfo(Jx, Jy, Jw, Jh);
                operation = true;
                Close();
                allgraph();
                can.onmousemove = null;
                can.onmouseup = null;
                can.onmousedown = null;
            };
        };
    }
    var DanJiX = null;
    var DanJiY = null;
    //缩放矩形
    function SuoFangHua() {
        can.onmousedown = function (e) {
            e = e || window.event;
            DanJiX = e.offsetX || e.layerX;//点击的X坐标
            DanJiY = e.offsetY || e.layerY;//点击的Y坐标
            if (datarectangle != null) {
                //判断点击点是否在矩形的右下角
                if ((parseInt(datarectangle.x) + parseInt(datarectangle.w)) - 20 <= DanJiX && DanJiX <= ((parseInt(datarectangle.x) + parseInt(datarectangle.w))) && DanJiY >= (parseInt(datarectangle.y) + parseInt(datarectangle.h)) - 20 && DanJiY <= (parseInt(datarectangle.y) + parseInt(datarectangle.h))) {
                    //alert(11);
                    //怎么在右下角拖动鼠标对矩形放大缩小？(以解决)
                    can.onmousemove = function (e) {
                        pingyiJiX = e.offsetX || e.layerX;//平移的X坐标
                        pingyiJiY = e.offsetY || e.layerY;//平移的Y坐标
                        //判断移动坐标是否大于左上角坐标，并且移动坐标是否超出了画布的边界
                        if (pingyiJiX > parseInt(datarectangle.x) + parseInt(10) && pingyiJiY > parseInt(datarectangle.y) + parseInt(10) && pingyiJiX <= can.width - 10 && pingyiJiY <= can.height - 10) {
                            //重新绘制
                            Getredraw();
                            ctx.fillRect(datarectangle.x, datarectangle.y, pingyiJiX - datarectangle.x, pingyiJiY - datarectangle.y);
                            ctx.strokeRect(datarectangle.x, datarectangle.y, pingyiJiX - datarectangle.x, pingyiJiY - datarectangle.y);
                            //带来的问题改变了原来的（宽和高）？(已解决)
                            datarectangle.w = pingyiJiX - datarectangle.x;
                            datarectangle.h = pingyiJiY - datarectangle.y;
                            var linshi = new DateInfo(datarectangle.x, datarectangle.y, datarectangle.w, datarectangle.h)
                            GetActive(linshi);
                        }
                    }
                    //结束重新绘制
                    can.onmouseup = function () {
                        Close();
                        allgraph();
                        operation = true
                        //can.onmousedown = null;
                        can.onmousemove = null;
                    }
                }
                //判断点击点是否在矩形的右上角
                if ((parseInt(datarectangle.x) + parseInt(datarectangle.w)) - 20 <= DanJiX && DanJiX <= ((parseInt(datarectangle.x) + parseInt(datarectangle.w) + parseInt(20))) && DanJiY >= (parseInt(datarectangle.y) - parseInt(20)) && DanJiY <= (parseInt(datarectangle.y) + parseInt(20))) {
                    //怎么在右上角拖动鼠标对矩形放大缩小？(以解决)
                    can.onmousemove = function (e) {
                        pingyiJiX = e.offsetX || e.layerX;//平移的X坐标
                        pingyiJiY = e.offsetY || e.layerY;//平移的Y坐标
                        //重新绘制
                        Getredraw();
                        if (pingyiJiX < (parseInt(datarectangle.x) + parseInt(datarectangle.w)) && pingyiJiX > parseInt(datarectangle.x) + parseInt(10)) {//向里
                            ctx.fillRect(datarectangle.x, datarectangle.y, pingyiJiX - datarectangle.x, datarectangle.h);
                            ctx.strokeRect(datarectangle.x, datarectangle.y, pingyiJiX - datarectangle.x, datarectangle.h);
                            datarectangle.w = pingyiJiX - datarectangle.x;
                        }
                        if (pingyiJiX > (parseInt(datarectangle.x) + parseInt(datarectangle.w)) && pingyiJiX < can.width - 5) {//向外
                            ctx.fillRect(datarectangle.x, datarectangle.y, pingyiJiX - datarectangle.x, datarectangle.h);
                            ctx.strokeRect(datarectangle.x, datarectangle.y, pingyiJiX - datarectangle.x, datarectangle.h);
                            datarectangle.w = pingyiJiX - datarectangle.x;
                        }

                        if (pingyiJiY < parseInt(datarectangle.y) && pingyiJiY > 10) {//向上
                            var pingyih = parseInt(datarectangle.y) - pingyiJiY;
                            ctx.fillRect(datarectangle.x, pingyiJiY, datarectangle.w, parseInt(pingyih) + parseInt(datarectangle.h));
                            ctx.strokeRect(datarectangle.x, pingyiJiY, datarectangle.w, parseInt(pingyih) + parseInt(datarectangle.h));
                            datarectangle.y = pingyiJiY;
                            datarectangle.h = parseInt(pingyih) + parseInt(datarectangle.h)
                        }
                        if (pingyiJiY > parseInt(datarectangle.y) && parseInt(datarectangle.h) + parseInt(datarectangle.y) < can.height - 5 && pingyiJiY < parseInt(datarectangle.h) + parseInt(datarectangle.y) - 5) {//向下

                            var pingyih = pingyiJiY - parseInt(datarectangle.y);
                            ctx.fillRect(datarectangle.x, pingyiJiY, datarectangle.w, parseInt(datarectangle.h) - pingyih);
                            ctx.strokeRect(datarectangle.x, pingyiJiY, datarectangle.w, parseInt(datarectangle.h) - pingyih);
                            datarectangle.y = pingyiJiY;
                            datarectangle.h = parseInt(datarectangle.h) - pingyih;
                        }

                        var linshi = new DateInfo(datarectangle.x, datarectangle.y, datarectangle.w, datarectangle.h)
                        GetActive(linshi);
                    }
                    //结束重新绘制
                    can.onmouseup = function () {
                        Close();
                        allgraph();
                        operation = true
                        //can.onmousedown = null;
                        can.onmousemove = null;
                    }
                }

                判断点击点是否在矩形的左下角
                if ((parseInt(datarectangle.x)) - 20 <= DanJiX && DanJiX <= (parseInt(datarectangle.x) + parseInt(20)) && DanJiY >= (parseInt(datarectangle.y) + parseInt(datarectangle.h) - parseInt(20)) && DanJiY <= (parseInt(datarectangle.y) + parseInt(datarectangle.h) + parseInt(20))) {
                    //alert("我是左下角");
                    //怎么在左下角拖动鼠标对矩形放大缩小？(以解决)
                    can.onmousemove = function (e) {
                        pingyiJiX = e.offsetX || e.layerX;//平移的X坐标
                        pingyiJiY = e.offsetY || e.layerY;//平移的Y坐标
                        //重新绘制
                        Getredraw();

                        if (pingyiJiX > datarectangle.x && parseInt(datarectangle.x) + datarectangle.w <= can.width - 5) {//向里
                            var pingyiw = pingyiJiX - datarectangle.x;
                            ctx.fillRect(pingyiJiX, datarectangle.y, datarectangle.w - pingyiw, datarectangle.h);
                            ctx.strokeRect(pingyiJiX, datarectangle.y, datarectangle.w - pingyiw, datarectangle.h);
                            datarectangle.x = pingyiJiX;
                            if (datarectangle.w - pingyiw < 10) {
                                datarectangle.h = 10;
                            } else {
                                datarectangle.w = datarectangle.w - pingyiw;
                            }
                            datarectangle.h = datarectangle.h
                        }
                        if (pingyiJiX < datarectangle.x && pingyiJiX > 10) {//向外
                            var pingyiw = datarectangle.x - pingyiJiX;
                            ctx.fillRect(pingyiJiX, datarectangle.y, parseInt(datarectangle.w) + pingyiw, datarectangle.h);
                            ctx.strokeRect(pingyiJiX, datarectangle.y, parseInt(datarectangle.w) + pingyiw, datarectangle.h);
                            datarectangle.x = pingyiJiX;
                            datarectangle.w = parseInt(datarectangle.w) + pingyiw;
                        }
                        if (pingyiJiY > (parseInt(datarectangle.y) + parseInt(datarectangle.h)) && parseInt(datarectangle.y) + datarectangle.h <= can.height - 5) {//向下
                            var pingyih = pingyiJiY - (parseInt(datarectangle.y) + parseInt(datarectangle.h));
                            ctx.fillRect(datarectangle.x, datarectangle.y, datarectangle.w, pingyih + parseInt(datarectangle.h));
                            ctx.strokeRect(datarectangle.x, datarectangle.y, datarectangle.w, pingyih + parseInt(datarectangle.h));
                            datarectangle.h = pingyih + parseInt(datarectangle.h);
                        }
                        if (pingyiJiY < (parseInt(datarectangle.y) + parseInt(datarectangle.h))) { //向上
                            var pingyih = (parseInt(datarectangle.y) + parseInt(datarectangle.h)) - pingyiJiY;
                            ctx.fillRect(datarectangle.x, datarectangle.y, datarectangle.w, pingyih);
                            ctx.strokeRect(datarectangle.x, datarectangle.y, datarectangle.w, pingyih);
                            if (pingyih < 10) {
                                datarectangle.h = 10;
                            } else {
                                datarectangle.h = pingyih;
                            }
                        }
                        //带来的问题改变了原来的（宽和高）？(已解决)
                        //带来的问题改变了原来的（宽和高）？(已解决)

                        var linshi = new DateInfo(datarectangle.x, datarectangle.y, datarectangle.w, datarectangle.h)
                        GetActive(linshi);
                    }
                    //结束重新绘制
                    can.onmouseup = function () {
                        Close();
                        allgraph();
                        operation = true
                        //can.onmousedown = null;
                        can.onmousemove = null;
                    }

                }
                判断点击点是否在矩形的左上角
                if ((parseInt(datarectangle.x)) - 20 <= DanJiX && DanJiX <= (parseInt(datarectangle.x) + parseInt(20)) && (parseInt(datarectangle.y)) - 20 <= DanJiY && DanJiY <= (parseInt(datarectangle.y) + parseInt(20))) {
                    //alert("我是左上角");
                    //怎么在左上角拖动鼠标对矩形放大缩小？(以解决)
                    can.onmousemove = function (e) {
                        pingyiJiX = e.offsetX || e.layerX;//平移的X坐标
                        pingyiJiY = e.offsetY || e.layerY;//平移的Y坐标
                        //重新绘制
                        Getredraw();
                        if (pingyiJiX > datarectangle.x && parseInt(datarectangle.x) + datarectangle.w <= can.width - 10) {//向里
                            var pingyiw = pingyiJiX - datarectangle.x;
                            ctx.fillRect(pingyiJiX, datarectangle.y, datarectangle.w - pingyiw, datarectangle.h);
                            ctx.strokeRect(pingyiJiX, datarectangle.y, datarectangle.w - pingyiw, datarectangle.h);
                            datarectangle.x = pingyiJiX;
                            if (datarectangle.w - pingyiw < 10) {
                                datarectangle.w = 10;
                            } else {
                                datarectangle.w = datarectangle.w - pingyiw;
                            }
                        }
                        if (pingyiJiX < datarectangle.x && pingyiJiX > 10) {//向外
                            var pingyiw = datarectangle.x - pingyiJiX;
                            ctx.fillRect(pingyiJiX, datarectangle.y, parseInt(datarectangle.w) + pingyiw, datarectangle.h);
                            ctx.strokeRect(pingyiJiX, datarectangle.y, parseInt(datarectangle.w) + pingyiw, datarectangle.h);
                            datarectangle.x = pingyiJiX;
                            datarectangle.w = parseInt(datarectangle.w) + pingyiw;
                        }
                        if (pingyiJiY > parseInt(datarectangle.y) && parseInt(datarectangle.y) + datarectangle.h <= can.height - 5) {//向下
                            var pingyih = pingyiJiY - parseInt(datarectangle.y);
                            ctx.fillRect(datarectangle.x, pingyiJiY, datarectangle.w, parseInt(datarectangle.h) - pingyih);
                            ctx.strokeRect(datarectangle.x, pingyiJiY, datarectangle.w, parseInt(datarectangle.h) - pingyih);
                            datarectangle.y = pingyiJiY;

                            if (parseInt(datarectangle.h) - pingyih < 10) {
                                datarectangle.h = 10;
                            } else {
                                datarectangle.h = parseInt(datarectangle.h) - pingyih;
                            }
                        }
                        if (pingyiJiY < parseInt(datarectangle.y) && pingyiJiY > 10) { //向上
                            var pingyih = parseInt(datarectangle.y) - pingyiJiY;
                            ctx.fillRect(datarectangle.x, pingyiJiY, datarectangle.w, parseInt(datarectangle.h) + pingyih);
                            ctx.strokeRect(datarectangle.x, pingyiJiY, datarectangle.w, parseInt(datarectangle.h) + pingyih);
                            datarectangle.y = pingyiJiY;
                            datarectangle.h = parseInt(datarectangle.h) + pingyih;
                        }
                        //带来的问题改变了原来的（宽和高）？(已解决)
                        //带来的问题改变了原来的（宽和高）？(已解决)
                        var linshi = new DateInfo(datarectangle.x, datarectangle.y, datarectangle.w, datarectangle.h)
                        GetActive(linshi);
                    }
                    can.onmouseup = function () {
                        Close();
                        allgraph();
                        operation = true
                        //can.onmousedown = null;
                        can.onmousemove = null;
                    }
                }
            }
        }
    }

    //清除画布
    function ClerShape() {
        operation = false;
        optionD = false;
        Close();
        //清空数组
        polygondata = [];
        datarectangle = null;
        allgraph();
    }
    //绘制矩形
    function Juxing(datarectangle) {
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = "rgba(0,255,0,0.2)";
        //alert(datarectangle.x + "," + datarectangle.y + "," + datarectangle.w + "," + datarectangle.h);
        ctx.fillRect(datarectangle.x, datarectangle.y, datarectangle.w, datarectangle.h);
        ctx.strokeRect(datarectangle.x, datarectangle.y, datarectangle.w, datarectangle.h);
        GetActive(datarectangle)
    }
    //使用小方框来替换定点
    function active(x, y) {
        K = 8;
        ctx.strokeStyle = "blue"
        ctx.lineWidth = 1;
        ctx.strokeRect(x - (K / 2), y - (K / 2), K, K);
        ctx.stroke();
        ctx.strokeStyle = 'black'
    }
    //获取小方框
    function GetActive(d) {
        active(d.x, d.y)
        active(parseInt(d.x) + parseInt(d.w), d.y)
        active(parseInt(d.x), parseInt(d.y) + parseInt(d.h))
        active(parseInt(d.x) + parseInt(d.w), parseInt(d.y) + parseInt(d.h))
    }
    //重置配置
    function Getredraw() {
        ctx.clearRect(0, 0, can.width, can.height);
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = "rgba(0,255,0,0.2)";
    }
    //临时清除
    function Close() {
        var width = can.width;
        var height = can.height;
        can.width = 0;
        can.height = 0;
        can.width = width;
        can.height = height;
        ctx.clearRect(0, 0, can.width, can.height);
    }  
    //所有的图形
    function allgraph() {
        //Close();
        if (optionD) {
            huaBiHeDuoBianXing(polygondata);
        }
        if (operation) {
            if (datarectangle != null) {
                Juxing(datarectangle);
            }
        }
        AllignoreShow();
    }




    //#region   忽略区
    var Allignore = new Array();
    var Idatadraw = [];
    //绘制忽略区
    function IHuaDuoBianXing() {
        if (Allignore.length < 3) {
            allgraph();
            Close();
            can.onmousedown = function (e) {
                e = e || window.event;
                Jx = e.offsetX || e.layerX;//起点的X坐标
                Jy = e.offsetY || e.layerY;//起点的Y坐标
                can.onmouseup = function () {
                    Idatadraw.push(new DuoXY(Jx, Jy));
                    if (Idatadraw.length > 1) {
                        allgraph();
                        Close();
                        if (Idatadraw.length >= 2) {
                            if ((Idatadraw[0].x - 10) < Jx && Jx < (parseInt(Idatadraw[0].x) + 10) && (Idatadraw[0].y - 10) < Jy && Jy < (parseInt(Idatadraw[0].y) + 10)) {
                                //X.pop(); Y.pop();
                                Idatadraw.pop();
                                Allignore.push(Idatadraw)
                                //AllignoreShow();
                                can.onmousedown = null;//重置
                                Idatadraw = [];
                                allgraph();
                            } else {
                                allgraph();
                                DuoBianXing(Idatadraw)
                            };
                        }
                    } else {
                        allgraph();
                    }

                }
            }
        } else {
            alert("目前最多支持三个忽略区")
        }
    }
    //删除忽略区
    function IDeleteHuaDuoBianXing() {
      
        can.onmousedown = function (e) {
            e = e || window.event;
            DanJiX = e.offsetX || e.layerX;//点击的X坐标
            DanJiY = e.offsetY || e.layerY;//点击的Y坐标
            //循环数组
            var linshiJuxing = new Array();
            for (var m = 0; m < Allignore.length; m++) {
                var X = [];
                var Y = [];
                var Idata = Allignore[m]
                for (var i = 0; i < Idata.length; i++) {
                    X[i] = Idata[i].x; Y[i] = Idata[i].y
                }
                //获取多边形X数组最大值
                var maxX = Math.max.apply(null, X);
                var minX = Math.min.apply(null, X);
                var maxY = Math.max.apply(null, Y);
                var minY = Math.min.apply(null, Y);
                var linshiW = maxX - minX; var linshiH = maxY - minY;
                linshiJuxing.push(new DateInfo(minX, minY, linshiW, linshiH))
            }
            //循环数组
            for (var i = 0; i < linshiJuxing.length; i++) {
                //判断单击的点坐标是否在矩形上
                if (DanJiX >= linshiJuxing[i].x && DanJiX <= (parseInt(linshiJuxing[i].x) + parseInt(linshiJuxing[i].w)) && DanJiY >= linshiJuxing[i].y && DanJiY <= (parseInt(linshiJuxing[i].y) + parseInt(linshiJuxing[i].h))) {
                    //alert("选中我了" + i);
                    if (confirm("你确定要删除吗")) {
                        //Idata.splice(i, 1);
                        Allignore.splice(i, 1);
                        Close();
                        allgraph();
                        //can.onmousedown = null;
                        break;
                    } else {
                        //can.onmousedown = null;
                    }
                }
            }
        }
    }
    //平移忽略区
    function IPingYiHuaDuoBianXing() {
        can.onmousedown = function (e) {
            e = e || window.event;
            DanJiX = e.offsetX || e.layerX;//点击的X坐标
            DanJiY = e.offsetY || e.layerY;//点击的Y坐标
            var n;      
            for (var i = 0; i < Allignore.length; i++) {
                var ArrayX = []; var ArrayY = [];
                //循环数组     
                var singerignore = Allignore[i];
                for (var j = 0; j < singerignore.length; j++) {
                    ArrayX.push(singerignore[j].x); ArrayY.push(singerignore[j].y);
                }
                console.warn("ArrayX"); console.warn(ArrayX);
                console.warn("ArrayY"); console.warn(ArrayY);
                //最大值//最小值
                var minx = Math.min.apply(null, ArrayX); var maxx = Math.max.apply(null, ArrayX);
                //最大值//最小值
                var miny = Math.min.apply(null, ArrayY); var maxy = Math.max.apply(null, ArrayY);
                if (DanJiX >= parseInt(minx) && DanJiY >= parseInt(miny) && DanJiY <= parseInt(maxy) && DanJiX <= parseInt(maxx)) {
                    n = i;
                    //alert(n);
                    break;
                }
            }
            can.onmousemove = function (e) {
                pingyiDX = e.offsetX || e.layerX;//平移的X坐标
                pingyiDY = e.offsetY || e.layerY;//平移的Y坐标          
                //console.warn("pingyiDX:" + pingyiDX + "DanJiX:" + DanJiX); console.warn("pingyiDY:" + pingyiDY + "DanJiY:" + DanJiY);
                //console.warn("X方向的位移:" + (pingyiDX - DanJiX)); console.warn("Y方向的位移:" + (pingyiDY - DanJiY));
                if (10 <= pingyiDX && parseInt(pingyiDX) <= can.width && 10 <= pingyiDY && parseInt(pingyiDY) <= can.height) {
                    var xiangduiX = pingyiDX - DanJiX; var xiangduiY = pingyiDY - DanJiY;
                    DanJiX = pingyiDX; DanJiY = pingyiDY;
                    Close();
                    var updategnore = Allignore[n];
                    console.warn("updategnore"); console.warn(updategnore);
                    for (var k = 0; k < updategnore.length; k++) {
                        updategnore[k].x = parseInt(updategnore[k].x) + parseInt(xiangduiX);
                        console.warn(updategnore[k].x);
                        updategnore[k].y = parseInt(updategnore[k].y) + parseInt(xiangduiY);
                        console.warn(updategnore[k].y);
                    }
                    Allignore[n] = updategnore;
                    allgraph();
                }
            }
            //结束重新绘制
            can.onmouseup = function () {
                Close();          
                allgraph();
                //can.onmousedown = null;
                can.onmousemove = null;
            }

        }
    }


    //缩放忽略区
    function ISuoFangDuoBianXing() {
        console.warn("Allignore"); console.warn(Allignore);
        can.onmousedown = function (e) {
            e = e || window.event;
            DanJiX = e.offsetX || e.layerX;//点击的X坐标
            DanJiY = e.offsetY || e.layerY;//点击的Y坐标
       
            var m;
            for (var i = 0; i < Allignore.length; i++) {
                var singerignore = Allignore[i];
                for (var j= 0; j< singerignore.length; j++) {
                    if ((parseInt(singerignore[j].x) + parseInt(10)) >= DanJiX && DanJiX >= (parseInt(singerignore[j].x) - 10) && DanJiY >= (parseInt(singerignore[j].y - 10)) && DanJiY <= (parseInt(singerignore[j].y) + parseInt(10))) {
                        m = i;
                        break;
                    }
                }
            }
            if (m != null) {
                console.warn("updatagnore"); console.warn(Allignore[m]);
                var updatagnore = Allignore[m];
                //循环数组
                for (var i = 0; i < updatagnore.length; i++) {
                    //判断单击的点坐标是否在顶点上
                    if ((parseInt(updatagnore[i].x) + parseInt(10)) >= DanJiX && DanJiX >= (parseInt(updatagnore[i].x) - 10) && DanJiY >= (parseInt(updatagnore[i].y - 10)) && DanJiY <= (parseInt(updatagnore[i].y) + parseInt(10))) {
                        var pointX = updatagnore[i].x; var pointY = updatagnore[i].y;//获取单击某一个的坐标
                        var n = i;
                        can.onmousemove = function (e) {
                            pingyiDX = e.offsetX || e.layerX;//平移的X坐标
                            pingyiDY = e.offsetY || e.layerY;//平移的Y坐标
                            //平移是否超出画布界限（X和Y）?（已解决）
                            if (10 <= pingyiDX && parseInt(pingyiDX) <= can.width && 10 <= pingyiDY && parseInt(pingyiDY) <= can.height) {
                                Close();
                                ctx.beginPath();
                                ctx.strokeStyle = "black";
                                ctx.moveTo(pingyiDX, pingyiDY);
                                active(pingyiDX, pingyiDY)
                                //alert("n:"+n)
                                if (n > 0) {
                                    var linshipolygondata = [];
                                    for (var i = 0; i < n; i++) {
                                        linshipolygondata.push(new DuoXY(updatagnore[i].x, updatagnore[i].y));
                                    }
                                    updatagnore.splice(0, n)
                                    updatagnore = updatagnore.concat(linshipolygondata)
                                }
                                for (var i = 0; i < updatagnore.length; i++) {
                                    ctx.lineTo(updatagnore[i].x, updatagnore[i].y);
                                    active(updatagnore[i].x, updatagnore[i].y)
                                }
                                ctx.lineJoin = "round"; //线条与线条之间的连接方式
                                ctx.closePath();//表示动作完毕
                                ctx.stroke();
                                //ctx.fillStyle = "#D1E9E9";//填充的颜色
                                ctx.fillStyle = "rgba(255,252,153,0.2)";//填充的颜色
                                ctx.fill();//填充
                                updatagnore[0].x = pingyiDX; updatagnore[0].y = pingyiDY;
                                n = 0;
                            }
                        }
                        //结束重新绘制
                        can.onmouseup = function () {
                            Close();
                            Allignore[m] = updatagnore;
                            m = null;
                            //optionD = true;
                            allgraph();
                            //can.onmousedown = null;
                            can.onmousemove = null;
                        }
                        break;
                    }
                }

            }

        }
    }

    //清除忽略区
    function IClerJuXHua() {
  
        Allignore = new Array();//清空数组
        Close();
        allgraph();
    }
    //所有的忽略区
    function AllignoreShow() {
        if (Allignore.length > 0) {
            for (var i = 0; i < Allignore.length; i++) {
                IhuaBiHeDuoBianXing(Allignore[i]);
            }
        }
    }
    /*画闭合忽略区多边形 */
    function IhuaBiHeDuoBianXing(data) {
        ctx.beginPath();
        //ctx.strokeStyle = "red";
        ctx.moveTo(data[0].x, data[0].y);
        for (var i = 1; i < data.length; i++) {
            ctx.lineTo(data[i].x, data[i].y);
        }
        ctx.lineJoin = "round"; //线条与线条之间的连接方式
        ctx.closePath();//表示动作完毕
        ctx.stroke();
        ctx.fillStyle = "rgba(255,252,153,0.2)";//填充的颜色
        ctx.fill();//填充
    }
    //#endregion
</script>

 

我是一只小小鱼~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
082：vue+leaflet 绘制多个点的envelope矩形
大剑师兰特的GIS世界
02-20 534
第082个本示例的目的是介绍演示如何在vue+leaflet中如何根据多边形的几个坐标点来绘制envelope矩形。
LeaFlet学习之动态绘制图形
weixin_30470857的博客
07-13 272
底图使用mapbox设置样式加载的，由于mapbox我也只会简单的应用在这里就不多说了，本文主要讲的是动态图形的绘制写的比较糙，代码重复太多，仅为展示所用，可以动态绘画点，线，圆，多边形。 一、概述 主要的用的就是事件click、mousedown、mousemove、mouseup事件，Leaflet对绘图好像没有怎么封装，我们要想自己动态绘制主要通过事件自己实现，代码不难，简单易...
如何使用 Fabric.js 实现动态图片标注
最新发布
gaotlantis的博客
05-24 627
通过本文的详细步骤和注意事项，你可以轻松地在项目中实现基于 Fabric.js 的图片标注功能。在项目中，我们需要根据后端返回的坐标对图片进行标注，比如画矩形框或多边形。COCO格式中的bbox表示的是对象在图像中的边界框坐标和尺寸信息,可用于目标检测等计算机视觉任务。在获取到数据后，我们需要加载图片并进行标注。我们从后端获取数据后，开始渲染图片，并在图片加载到画布中后，进行标注绘制。矩形标注是根据后端返回的矩形坐标绘制的，我们将坐标转换为。多边形标注是根据后端返回的坐标绘制的，我们将坐标转换为。
动态创建矩形及拖拽
帐前卒 专栏
08-31 1410
动态的创建矩形直接使用var divs = document.createElement("div");然后使用document.body.appendChild(divs);   如果这句不写是不能显示Div的。还可以为这个变量（div）再进行属性的赋值如：divs.id = 1;//设置iddivs.style.filter = "alpha(opacity=50)";//设置
至简设计系列_LCD入门案例_边框显示
MDYFPGA的博客
09-21 547
至简设计系列_LCD入门案例_边框显示 –作者：喝喝 本文为明德扬原创及录用文章，转载请注明出处！ 1.1 总体设计 1.1.1 概述 液晶显示器是一-种通过液晶和色彩过滤器过滤光源，在平面面板上产生图像的数字显示器。LCD 的构造是在两片平行的玻璃基板当中放置液晶盒，下基板玻璃上设置薄膜晶体管,.上基板玻璃上设置彩色滤光片，通过薄膜晶体管上的信号与电压改变来控制液晶分子的转动方向，从而达到控制每个像素点偏振光出射与否而达到显示目的。与传统的阴极射线管相比，LCD具有占用空间小，低功耗，低辐射，无
利用fabric绘画矩形和多边形
小菜张的博客
06-07 1572
利用fabric在一张图片上标注矩形和多边形
canvas绘图任意矩形、多边形
10-19
这里，`drawType`用于区分绘制矩形还是多边形，`isDrawing`标记当前是否在绘制，`startPoint`和`currentPoint`记录鼠标的起始位置和当前位置，`polygonPoints`则用于存储多边形的顶点。 接下来，我们需要监听鼠标...
C#鼠标画多边形和矩形
11-05
- 使用`Graphics`对象的`DrawRectangle`方法绘制矩形，传入起点坐标和尺寸。 3. **绘制多边形**： - 初始化一个列表来存储多边形的顶点。 - 在`MouseDown`事件中，添加第一个点到列表。 - 在`MouseMove`事件中...
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
08-31
`drawRect`方法用于绘制矩形，包括圆角矩形。它接受左上角坐标(x, y)，宽度(width)，高度(height)，圆角半径(radius)，颜色(color)和绘制类型(type)。使用`quadraticCurveTo`创建圆角效果： ```javascript var ...
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
09-28
Canvas API 提供了两个专门的方法来绘制矩形：`fillRect()` 和 `strokeRect()`。前者填充矩形内部，后者仅绘制矩形边框： ```javascript // 填充矩形 ctx.fillStyle = "red"; ctx.fillRect(50, 50, 100, 100); // ...
CorelDRAW几何图形的绘制矩形椭圆多边形等.ppt
12-09
CorelDRAW几何图形的绘制矩形椭圆多边形等.ppt
计算机图形-交互式绘制多边形源码
04-23
目的效果： 1）使用鼠标在屏幕客户区绘制任意点数的多边形。要求使用橡皮筋技术 动态绘制每条边；鼠标移动过程中按下 Shift 键时可绘制垂直边或水平边；将多 边形的终点移动到多边形的起点时自动封闭多边形；在绘制多边形的过程中，状 态栏动态显示鼠标光标的位置坐标。  （2）当开始绘制多边形时，更改鼠标光标为十字光标，多边形绘制完毕后 恢复为箭头光标。  （3）多边形闭合后自动调用有效边表算法填充多边形内部区域。 
MFC实现的画多边形程序
12-15
MFC实现的简单画多边形程序，按压鼠标左键作为起点，再次点下是前一段线的终点另一条边的起点，当点下鼠标右键时，颜色填充多边形内部。
leaflet实现自定义线、矩形和扇形的绘制
liuchao的博客
11-27 2206
采用原生的leaflet的API实现自定义线、矩形和扇形的绘制。完成自定义线、矩形、扇形的绘制。
随滑动改变的动态矩形背景
fenganit的博客
10-11 365
随滑动改变的动态矩形背景 前言 可能看到这个标题有点懵逼,本屌的表达能力有限,最近工作比较清闲,朋友公司正在做到这个效果,所以就帮基友写了一个小Demo,总体来说就是以下效果. Demo下载 朋友公司需要达到的效果 Demo中的效果 使用过程 layout <com.fengan.dynamicrectangledemo.DynamicRectangleView an
111：vue+leaflet自定义绘制，画多边形、折线、圆形、marker、矩形
大剑师兰特的GIS世界
03-05 952
第111个本示例的目的是介绍演示如何在vue+leaflet中自定义绘制工具，可以画多边形、折线、圆形、marker、矩形。
【Fabric.js】监听画布or元素的点击、选中、移动、添加、删除销毁、变形等各事件
从今年开始写写博客~~
02-08 1992
例子就用vue项目组件里的代码，fabric的使用跟vue、react、angular之类的框架都没任何关系！代码中监听事件回调函数里的第一个参数，根据事件的不同，有目标图形信息、坐标信息等，自己一看就看得懂了，不讲解；在fabric使用过程中，如果想要玩各种花样，那么fabric的事件监听是一定、必须、肯定要掌握！并且本demo只对功能进行讲述，实际项目使用肯定要进行封装，别直接就照抄导致写的丑！代码只简单介绍一些常用的目标监听事件，更全面的、更多花样的玩法自行查阅官网即可~~
[前端] fabric.js 绘制复杂图形（求大佬们帮忙解决一下，感谢感谢感谢感谢感谢感谢感谢感谢~好人一生平安~）
qq_33946215的博客
08-12 1123
功能分别截图如下： 1：类似于码尺功能，在开始绘制绘画后起点-到结点 双方向都有箭头指示。切有文字（米数可不计算能编辑填写就行）。 2：文字输入功能，第一个就是在编写文字的时候带框，第二个是带框的情况下在右边有一个线点，线点可以通过拖拽调整长度； 3：多边形绘制，就是通过用户点击选择绘制出用户绘制出的图形，类属于PS的钢板工具，从起点点击结点后可绘制出对应图形。 4：五角星绘制（这些都是算法…大佬们肯定OK的），圆形标识与方向标识都是与图所示绘制出对应的图形，只是其中的A是可以进行编辑的就是文本框，
fabric.js 实现多个不规则图形
gao2015666的博客
07-13 609
效果图，是可拖拽，重新生成新的坐标。
unity动态构建mesh绘制多边形
09-05
Unity是一款功能强大的游戏开发引擎，它可以使用脚本语言编写代码来实现各种功能。在Unity中，我们可以使用Mesh来绘制多边形。 首先，我们需要创建一个空物体，然后在其上添加一个MeshFilter和一个MeshRenderer组件。MeshFilter用来存储多边形的顶点信息，而MeshRenderer用于显示多边形。 接下来，我们需要使用代码来动态构建多边形的顶点和三角形索引。我们可以使用Vector3数组来存储多边形的顶点位置，并且使用int数组来存储多边形的三角形索引。 例如，我们想要绘制一个矩形，可以通过以下步骤来实现： 1. 创建一个Vector3数组来存储矩形的四个顶点的位置。 Vector3[] vertices = new Vector3[4]; 2. 设置矩形的四个顶点的位置。 vertices[0] = new Vector3(0, 0, 0); vertices[1] = new Vector3(1, 0, 0); vertices[2] = new Vector3(0, 1, 0); vertices[3] = new Vector3(1, 1, 0); 3. 创建一个int数组来存储矩形的两个三角形的顶点索引。 int[] triangles = new int[6]; 4. 设置矩形的两个三角形的顶点索引。 triangles[0] = 0; triangles[1] = 2; triangles[2] = 1; triangles[3] = 2; triangles[4] = 3; triangles[5] = 1; 5. 将顶点数组和三角形索引数组赋值给MeshFilter的mesh属性。 Mesh mesh = GetComponent<MeshFilter>().mesh; mesh.vertices = vertices; mesh.triangles = triangles; 6. 最后，我们需要更新Mesh的各种属性，例如法线、UV坐标等。 mesh.RecalculateNormals(); mesh.RecalculateBounds(); mesh.RecalculateTangents(); 通过上述步骤，我们就可以在Unity中动态构建Mesh并绘制多边形了。当然，根据实际需求，我们可以使用更复杂的算法来构建更复杂的多边形。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值