水印换行

application/admin/view/common/script.html

@@ -1,94 +1,109 @@
 <script src="__CDN__/assets/js/require{$Think.config.app_debug?'':'.min'}.js" data-main="__CDN__/assets/js/require-backend{$Think.config.app_debug?'':'.min'}.js?v={$site.version|htmlentities}"></script>
+<input type="hidden" value="{$Think.session.admin.username}" name="" id="username">
+<input type="hidden" value="{$Think.session.admin.company}" name="" id="company">
 <script>
-    // 需要用到的地方调用就好
-    watermark({watermark_txt: '水印文字'})
-
-    function watermark(settings) {
-        //默认设置
-        var defaultSettings={
-            watermark_txt:"text",
-            watermark_x:20,//水印起始位置x轴坐标
-            watermark_y:20,//水印起始位置Y轴坐标
-            watermark_rows:20,//水印行数
-            watermark_cols:20,//水印列数
-            watermark_x_space:50,//水印x轴间隔
-            watermark_y_space:100,//水印y轴间隔
-            watermark_color:'#aaa',//水印字体颜色
-            watermark_alpha:0.4,//水印透明度
-            watermark_fontsize:'14px',//水印字体大小
-            watermark_font:'微软雅黑',//水印字体
-            watermark_width:210,//水印宽度
-            watermark_height:80,//水印长度
-            watermark_angle:15//水印倾斜度数
+    function watermark(element, config) {
+        // 获取元素的坐标
+        function getOffset(el) {
+            if (el.offsetParent) {
+                return {
+                    x: el.offsetLeft + getOffset(el.offsetParent).x,
+                    y: el.offsetTop + getOffset(el.offsetParent).y,
+                };
+            }
+            return {
+                x: el.offsetLeft,
+                y: el.offsetTop,
+            };
+        }
+        if (!element) return;
+        // 默认配置
+        const _config = {
+            text1: '张三',   //文本1
+            text2: '13868686868',   // 文本2
+            start_x: 0,      // x轴起始位置
+            start_y: 0,      // y轴起始位置
+            space_x: 100,    // x轴间距
+            space_y: 50,     // y轴间距
+            width: 210,      // 宽度
+            height: 80,      // 长度
+            fontSize: 14,    // 字体
+            color: '#aaa',   // 字色
+            alpha: 0.4,      // 透明度
+            rotate: 15,       // 倾斜度
         };
-        //采用配置项替换默认值，作用类似jquery.extend
-        if(arguments.length===1&&typeof arguments[0] ==="object" )
-        {
-            var src=arguments[0]||{};
-            for(key in src)
-            {
-                if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])
+        // 替换默认配置
+        if (arguments.length === 2 && typeof arguments[1] === "object") {
+            const src = arguments[1] || {};
+            for (let key in src) {
+                if (src[key] && _config[key] && src[key] === _config[key]) {
                     continue;
-                else if(src[key])
-                    defaultSettings[key]=src[key];
+                } else if (src[key]) {
+                    _config[key] = src[key];
+                }
             }
         }
-
-        var oTemp = document.createDocumentFragment();
-
-        //获取页面最大宽度
-        var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
-        var cutWidth = page_width*0.0150;
-        var page_width=page_width-cutWidth;
-        //获取页面最大高度
-        var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
-        // var page_height = document.body.scrollHeight+document.body.scrollTop;
-        //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
-        if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width *defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
-            defaultSettings.watermark_cols = parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
-            defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
-        }
-        //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
-        if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
-            defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
-            defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows ));
-        }
-        var x;
-        var y;
-        for (var i = 0; i < defaultSettings.watermark_rows; i++) {
-            y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
-            for (var j = 0; j < defaultSettings.watermark_cols; j++) {
-                x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
-
-                var mask_div = document.createElement('div');
-                mask_div.id = 'mask_div' + i + j;
-                mask_div.className = 'mask_div';
-                mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
-                //设置水印div倾斜显示
-                mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
-                mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
-                mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
-                mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
-                mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
-                mask_div.style.visibility = "";
-                mask_div.style.position = "absolute";
-                mask_div.style.left = x + 'px';
-                mask_div.style.top = y + 'px';
-                mask_div.style.overflow = "hidden";
-                mask_div.style.zIndex = "9999";
-                mask_div.style.pointerEvents='none';//pointer-events:none  让水印不遮挡页面的点击事件
-                //mask_div.style.border="solid #eee 1px";
-                mask_div.style.opacity = defaultSettings.watermark_alpha;
-                mask_div.style.fontSize = defaultSettings.watermark_fontsize;
-                mask_div.style.fontFamily = defaultSettings.watermark_font;
-                mask_div.style.color = defaultSettings.watermark_color;
-                mask_div.style.textAlign = "center";
-                mask_div.style.width = defaultSettings.watermark_width + 'px';
-                mask_div.style.height = defaultSettings.watermark_height + 'px';
-                mask_div.style.display = "block";
-                oTemp.appendChild(mask_div);
-            };
-        };
-        document.body.appendChild(oTemp);
+        // 节点的总宽度
+        const total_width = element.scrollWidth;
+        // 节点的总高度
+        const total_height = element.scrollHeight;
+        // 创建文本碎片，用于包含所有的插入节点
+        const mark = document.createDocumentFragment();
+        // 水印节点的起始坐标
+        const position = getOffset(element);
+        let x = position.x + _config.start_x, y = position.y + _config.start_y;
+        // 先循环y轴插入水印
+        do {
+            // 再循环x轴插入水印
+            do {
+                // 创建单个水印节点
+                const item = document.createElement('div');
+                item.className = 'watermark-item';
+                // 设置节点的样式
+                item.style.position = "absolute";
+                item.style.zIndex = 99999;
+                item.style.left = `${x}px`;
+                item.style.top = `${y}px`;
+                item.style.width = `${_config.width}px`;
+                item.style.height = `${_config.height}px`;
+                item.style.fontSize = `${_config.fontSize}px`;
+                item.style.color = _config.color;
+                item.style.textAlign = 'center';
+                item.style.opacity = _config.alpha;
+                item.style.filter = `alpha(opacity=${_config.alpha * 100})`;
+                // item.style.filter = `opacity(${_config.alpha * 100}%)`;
+                item.style.webkitTransform = `rotate(-${_config.rotate}deg)`;
+                item.style.MozTransform = `rotate(-${_config.rotate}deg)`;
+                item.style.msTransform = `rotate(-${_config.rotate}deg)`;
+                item.style.OTransform = `rotate(-${_config.rotate}deg)`;
+                item.style.transform = `rotate(-${_config.rotate}deg)`;
+                item.style.pointerEvents = 'none';    //让水印不遮挡页面的点击事件
+                // 创建text1水印节点
+                const text1 = document.createElement('div');
+                text1.appendChild(document.createTextNode(_config.text1));
+                item.append(text1);
+                // 创建text2水印节点
+                const text2 = document.createElement('div');
+                text2.appendChild(document.createTextNode(_config.text2));
+                item.append(text2);
+                // 添加水印节点到文本碎片
+                mark.append(item);
+                // x坐标递增
+                x = x + _config.width + _config.space_x;
+                // 超出文本右侧坐标停止插入
+            } while (total_width + position.x > x + _config.width);
+            // 重置x初始坐标
+            x = position.x + _config.start_x;
+            // y坐标递增
+            y = y + _config.height + _config.space_y;
+            // 超出文本底部坐标停止插入
+        } while (total_height + position.y > y + _config.height);
+        // 插入文档碎片
+        element.append(mark);
     }
+    var username = document.getElementById('username');
+    var company = document.getElementById('company');
+    //找到存放水印的盒子
+    const element = document.getElementsByTagName('body')[0];
+    watermark(element,{text1:username.value,text2:company.value});
 </script>