unigui实现水印纹的效果

效果

 

procedure TMainForm.Set_watermark(xparent: TWinControl; s: string);
var hf:TUniHTMLFrame;
begin
   hf:= TUniHTMLFrame.Create(xparent);
   hf.Parent:= xparent;
   with hf do
    begin
       Height:=0; Width:=0; HTML.Clear;
       HTML.Add('<div id="watermark"> </div><script>'
        // 定义水印函数
        +'function addWatermark({'
            +'container = document.body,' // 水印添加到的容器，默认为 body
            +'width = "0px",' // 水印 canvas 的宽度
            +'height = "0px", '// 水印 canvas 的高度
            +'textAlign = "center", '// 水印文字的对齐方式
            +'textBaseline = "middle",' // 水印文字的基线
            +'font = "16px Microsoft Yahei",' // 水印文字的字体
            +'fillStyle = "rgba(90, 90, 90, 0.6)",' // 水印文字的填充样式
            +'content = "", '// 水印文字的内容
            +'content2 = "",' // 水印文字的内容
            +'rotate = "15", '// 水印文字的旋转角度
            +'zIndex = 10000,' // 水印的 z-index 值
        +'}) { '
            // 生成水印 canvas
            +'const canvas = document.createElement("canvas"); '
            +'canvas.setAttribute("width", width); '
            +'canvas.setAttribute("height", height); '
            +'const ctx = canvas.getContext("2d"); '
            //ctx.textAlign = textAlign;
            +'ctx.textBaseline = textBaseline; '
            +'ctx.font = font;'
            +'ctx.fillStyle = fillStyle; '
            +'ctx.rotate((Math.PI / 180) * rotate);'
            +'ctx.fillText(content, parseFloat(width) / 5, parseFloat(height) / 30); '
            +'ctx.fillText(content2, parseFloat(width) / 2, parseFloat(height) / 2);'
            // 将 canvas  转换为 base64 URL
            + 'const base64Url = canvas.toDataURL(); '
            +' const __wm = document.querySelector(''.__wm'');'
            +'const watermarkDiv = __wm || document.createElement("div"); '
            +'const styleStr = ` '
                        +' position: fixed;'
                        +' top: 0;'
                        +' left: 0;'
                        +' bottom: 0;'
                        +' right: 0; '
                        +' width: 100%;'
                        +' height: 100%; '
                        +' z-index: ${zIndex};'
                        +' background-repeat: repeat;'
                        +' pointer-events: none;'
                        +' background-image: url(''${base64Url}'')'
                        +'`; '
            +'watermarkDiv.setAttribute("style", styleStr);'
            +'watermarkDiv.classList.add("__wm");'
           //则创建一个 div 并设置样式和类名

            +'if (!__wm) {'
               +' container.style.position = ''relative'';'
                +'container.insertBefore(watermarkDiv, container.firstChild);'
            +'} '
              // 监听容器变化，当容器发生变化时重新调用 addWatermark 函数
//              +'const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;'
//               +' if (MutationObserver) {'
//                   +' let mo = new MutationObserver(function () { '
//                      +'  const __wm = document.querySelector(''.__wm''); '
//                        // 只在__wm元素变动才重新调用__canvasWM
//                       +' if ((__wm && __wm.getAttribute(''style'') !== styleStr) || !__wm) { '
//                            // 避免一直触发
//                            +'mo.disconnect();'
//                            +'mo = null; '
////                            +'console.log(''1''); '
//                            +'addWatermark({'
//                            +' container: document.getElementById("watermark"),'
//                            +' width: "300px", '
//                            +' height: "150px", '
//                            +' textAlign: "center", '
//                            +' textBaseline: "middle",'
//                            +' font: "16px Microsoft Yahei", '
//                            +' fillStyle: "rgba(90, 90, 90, 0.3 )",'
//                            +' content: "",'
//                            +' content2: "", '
//                            +' rotate: "15", '
//                            +' zIndex: 10000, '
//                            +' });'
//                        +'} '
//                    +'});'
//
//                    +'mo.observe(container, { '
//                       +' attributes: true,'
//                       +' subtree: true,'
//                        +'childList: true '
//                   +' });'
//              + ' } '
      + ' } '
        // 调用 addWatermark 函数添加水印
        +'addWatermark({  '
           +' container: document.getElementById("watermark"), '
           +' width: "200px",'
           +' height: "258px",'
           +' textAlign: "center", '
           +' textBaseline: "middle", '
           +' font: "16px Microsoft Yahei", '
           +' fillStyle: "rgba(90, 90, 90, 0.3 )", '
           +' content: "'+s+'", '
           +' content2: "'+ FormatDateTime('YYMMdd HH:MM', Now)+'", '
           +' rotate: "40", '
           +' zIndex: 10000,  '
       +' });'
      +'</script>');
//      Refresh;
    end;
end;

 调用

procedure TMainForm.UniFormShow(Sender: TObject);
begin
 Set_watermark(MainForm, 'asdf涂dsa磊');
end;