软件项目技术点(5)——在canvas上绘制动态网格线

AxeSlide软件项目梳理   canvas绘图系列知识点整理

grid类的实现

当鼠标在画布上缩放时，网格能跟着我的鼠标滚动而相应的有放大缩小的效果。

下面是具体实现的代码，draw函数里计算出大网格每条线的间隔和小网格线的间隔，以及大网格和小网格绘制所用的颜色。

具体的实现算法也是参照另外一个软件用到的，但是我们改进了很多，例如控制只将当前画面显示出来的线条绘制出来

       draw() {
            var scale = (editor && editor.canvas && editor.canvas.canvasImp.scale) || 1;//获取当前画布缩放比
            var B = .05;
            var t = 50;
            for (var e = 50 * scale; e >= 200;) // 放大
            {
                e /= 4;
                t = e / scale;
            }
            for (; 50 > e;) //缩小
            {
                e *= 4;
                t = e / scale;
            }
            var i = B + (e - 50) / 150 * (.07 - B);//颜色值
           
            this.clear(0, 0, this.canvasWidth, this.canvasHeight);//清空画布

            this.drawGrid(t, i + 0.03);//绘制小格子

            this.drawGrid(t * 4, .21 - i);//绘制大格子

        }

        private drawGrid(e, i) {//e表示每两条线的间隔距离值；i颜色值，大格子的颜色和小格子的颜色值不同
            var P = "rgba(0,0,0,";
            var l = P + i + ")", t = 0;

            var scale = (editor && editor.canvas && editor.canvas.canvasImp.scale) || 1;
            this.context2D.beginPath();
            //为优化性能，控制只绘制当前画面大小的网格线
            var b = this.getLimits();
            var winInfo = getWindow();
            var viewMinx = 0;
            var viewMiny = 0;
            var viewMaxx = winInfo.width;
            var viewMaxy = winInfo.height;
            var isDraw = false;
            var windowViewPoints = new Common.List<Core.Point>();
            windowViewPoints.add(new Core.Point(viewMinx, viewMiny));
            windowViewPoints.add(new Core.Point(viewMaxx, viewMaxy));
            windowViewPoints.add(new Core.Point(viewMinx, viewMaxy));
            windowViewPoints.add(new Core.Point(viewMaxx, viewMiny));
            var that = this;

            var minX = 0, maxX = 0, minY = 0, maxY = 0;//最大、最新 x y值

            windowViewPoints.foreach((index, item: Core.Point) => {
                var point = that.context2D.transformedPoint(item.x, item.y);
                if (index == 0) {
                    maxX = minX = point.x;
                    minY = maxY = point.y;
                }
                else {
                    minX = minX > point.x ? point.x : minX;
                    maxX = maxX < point.x ? point.x : maxX;

                    minY = minY > point.y ? point.y : minY;
                    maxY = maxY < point.y ? point.y : maxY;
                }
            });

            //纵向线条
            t = b.minX;

            while (true) {
                if (Math.abs(t - minX) <= e || t >= minX) {
                    this.context2D.moveTo(t, minY);
                    this.context2D.lineTo(t, maxY);
                }
                t = t + e;
                if (t >= maxX) break;
            }
            

            //横向线条
            t = b.minY;
            while (true) {
                if (Math.abs(t - minY) <= e || t >= minY) {
                    this.context2D.moveTo(minX, t);
                    this.context2D.lineTo(maxX, t);
                }
                t = t + e;
                if (t >= maxY) break;
            }
            this.context2D.closePath();
            this.context2D.strokeStyle = l;
            this.context2D.lineWidth = 1 / scale;
            this.context2D.stroke();
        }