首页 > 其他分享 >unigui可以实现水印纹的效果

unigui可以实现水印纹的效果

时间:2024-11-13 15:58:31浏览次数:1  
标签:__ canvas const unigui 效果 wm 印纹 水印 90

效果

 

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;

标签:__,canvas,const,unigui,效果,wm,印纹,水印,90
From: https://www.cnblogs.com/tulater/p/18544157

相关文章

  • vue3使用tsParticles实现爆开五彩碎纸屑动效,简单高效免费(撒花特效、粒子效果)
    实现效果:tsParticles|ConfettiPreset|JavaScriptParticles,ConfettiandFireworksanimationsforyourwebsitetsParticles-Easilycreatehighlycustomizableparticles,confettiandfireworksanimationsandusethemasanimatedbackgroundsforyourweb......
  • 这个流程基本涵盖了墙面装修的整个过程,抹腻子、挂网、打磨和上漆都是为了确保墙面平整
    以下是一个更加完整和详细的墙面装修流程表格,涵盖了整个墙面装修的各个环节,从前期准备到最终收尾的每一个细节:阶段步骤具体操作注意事项1.墙面准备阶段清理墙面-用吸尘器、扫把或湿布清理墙面上的灰尘、油渍、污渍。-清洁工作需要彻底,确保无杂质或油渍残留。......
  • html\css 网页立体转动盒子效果
    效果实现 转动方块效果练练手的代码,可能含有可以优化的地方,斟酌自取<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • Cocos Creator引擎开发:动作效果与角色动画_动画曲线的编辑与调整
    动画曲线的编辑与调整在CocosCreator引擎中,动画曲线是实现角色动画和动作效果的核心工具之一。通过编辑和调整动画曲线,可以精确控制动画的各个属性,如位置、旋转、缩放等,从而达到更加逼真的动画效果。本节将详细介绍如何在CocosCreator中编辑和调整动画曲线,包括曲线的基本......
  • 短信推广,如何了解用户的点击效果?
    近些年来,短信推广效果确实不如从前。但是对于不少行业来说,短信依然是转化用户最主要的低成本渠道。很多使用第三方短信平台的朋友都知道,用户是否点开了短信,无从得知。因此,为了判断短信的发送效果,也为了引导用户转化,我们一般会在短信中添加一条链接来引导用户点击。从目前的统......
  • 操作系统FCFS护航效果
    如果第一个作业的爆发时间是最高的,FCFS可能会受到队列影响。就像在现实生活中一样,如果队列在路上经过,那么其他人可能会被堵塞,直到完全通过。这也可以在操作系统中进行模拟。如果CPU在就绪队列的前端获得较高突发时间的进程,则较低突发时间的进程可能被阻塞,这意味着如果执行中......
  • Cesium实现雷达效果
    目录项目地址实现效果核心代码项目地址https://github.com/zhengjie9510/webgis-demo实现效果核心代码varradar=scene.primitives.add(newPrimitive({geometryInstances:redCone,appearance:newMaterialAppearance({//自定义纹理m......
  • 少儿编程教育全面普及,赛事和等级考试成为教学效果的关键
    随着少儿编程教育在国内的迅速普及,越来越多家长关注如何衡量孩子的学习效果。然而,由于少儿编程属于科学素质类课程,与传统学科不同,目前尚未形成标准化的课程和评价体系。这一现状使得如何有效外化和评估教学效果成为少儿编程教育中的一大痛点。在这一背景下,各类编程赛事、等级考......
  • Unity类银河战士恶魔城学习总结(P118 Thunder Strike On Ability 制作一把带有雷电效果
    【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili教程源地址:https://www.udemy.com/course/2d-rpg-alexdev/本节实现了一个能给武器和水晶爆炸技能附魔的项链,取名为风暴之心都是在造成伤害函数的部分加上了触发特殊效果的代码Sword_Skill_Controller.cs修改......
  • Vue+CSS 炫酷新年特效教程:极光背景+彩带+粒子动画 用 Vue 和 CSS 动画打造 2025 新年
    效果图......