FE Grid 参考线

x, y 为自定义画线的参数

clear–是否清空 grid

不 clear 就会自动保存划线历史

100px 间距

//helper method for FE align work
       _gridCanvas: null,
       setGridLine: function (x, y, clear) {
           var that = this;
           //var c = document.getElementById("grid");
           if (!this._gridCanvas) {
               this._gridCanvas = document.createElement("canvas");
               var c$ = $(this._gridCanvas);
               c$.attr("id", "grid")
               c$.css({ "position": "fixed", "top": "0px", "z-index": "99999999" });
               c$.attr("width", "1920");
               c$.attr("height", "1080");
               $("body").append(this._gridCanvas);
               var img = new Image();
               img.src = "/images/refrence.png";
               setImmediate(function () {
                   cxt.drawImage(img, 0, 0);
               })
           }
           var cxt = that._gridCanvas.getContext("2d");

           var a = [];
           var b = [];
           if (x) {
               a.push(x);
           }
           if (y) {
               b.push(y);
           }

           if (clear) {
               a = [];
               b = [];
           }

           for (var i = 0; i < a.length; i++) {
               if (x) {
                   cxt.moveTo(x, 0);
                   cxt.lineTo(x, 1080);
               }
           }

           for (var i = 0; i < b.length; i++) {
               if (y) {
                   cxt.moveTo(0, y);
                   cxt.lineTo(1920, y);
               }
           }
           cxt.strokeStyle = "#FF0000";
           cxt.stroke();
       },

参考背景图

实际运行效果图