怎么用Vue3指令实现水印背景

这篇文章主要介绍了怎么用Vue3指令实现水印背景的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用Vue3指令实现水印背景文章都会有所收获，下面我们一起来看看吧。页面水印业务相信我们都有遇过，为什么需要给页面添加水印？为了保护自己的版权和知识产权，给图片加上水印一般是为了防止盗图者用于商业用途，损害原作者的权益。那么在我们开发当中有什么方法可以实现呢？一般分为前端实现和后端实现这两种方法，本文主要是学习前端实现方法：方式一：直接将字体用块元素包裹，动态设置绝对定位，然后通过transform属性旋转。但是需免费云主机域名要考虑一个问题，当图片过大或图片过多时会很影响性能，所以就不详细说这一方式了。方式二：canvas上绘制出字体，设置好样式，最后以图片的样式导出，用图片作为水印层的背景图。在学习水印层之前，我先抛出两个问题：如果水印文字长，水印可以实现自适应吗？能否限制用户修改并删除水印？其实上面这两个问题是我们做页面水印需要考虑的两个核心问题，好的，话不多说，我们一起带着问题去探索????。首先定义一个指令，我们要明确两点：命名（v-water-mask）和绑定值（配置值，option），实现如下：效果如下图所示：从上图中我们可以看出，文字有文本以及时间字符串，水印文字都是倾斜了一定角度，其实就是旋转了一定角度的。那么问题来了，我们可能问这些是怎么设置的？首先这需要使用指令的时候通过一些配置来实现一些固定值，下面这里都把这些配置都封装成一个类了，为什么要这样做？这样就不用使用的时候每次都要设定一个默认值，比如通过定义接口来引用这些配置时每次都需要设置一个默认值：细心的地我们可能会发现显示地文本是一个数组，这样主要是为了方便分行，聪明地我们可能会问：假如其中一个比较长怎么换行？，别急别急，我们先了解一下指令是怎么定义的：定义指令：首先定义为一个ObjectDirective对象类型，因为指令也就是通过在不同生命周期中对当前元素做一些操作。waterMask方法：实现水印业务细节呈现，对文字的自适应换行，根据页面元素大小来计算合适宽高值。disablePatchWaterMask方法：通过MutationObserver方法监听DOM元素修改，从而阻止用户取消水印的呈现。声明指令：在main文件中定义声明指令，这样我们就可以全局使用这个指令了接下来我们来看一一分析水印的两个核心方法：waterMask和disablePatchWaterMask。通过waterMask方法实现，waterMask方法主要是做了四件事情：获取配置的默认值：由于开发者传参的时候不一定需要把所有配置的传进来，其实按照本身默认的一些值就行，通过浅拷贝把指令绑定的值传进来的一起融合一起就可以更新默认的配置：创建canvas标签：因为是通过canvas实现的，我们本身是没有直接在template中呈现这个标签，所以需要通过document对象创建canvas标签：绘制文本：首先遍历传入需要显示的水印信息，也就是textArr文本数组，遍历数组判断数组元素是不是超出了配置的每个水印默认宽高，然后根据文本元素返回超出文本长度的文本分割数组，同时把文本最大宽度返回，最后通过切割结果动态修改canvas的宽高。从上面代码中我们可以看出绘制文本的核心操作是切割超长文本和动态修改canvas的宽高。我们接下来看看这两个操作是如何实现的？measureText()方法是基于当前字型来计算字符串宽度的。所以canvas图形宽为hSinDeg + wCosDeg + settings.marginRight。canvas图形高为：wSinDeg + hCosDeg + settings.marginBottom。切割超长文本：寻找切割点：通过二分查找方法查询字符串超长的位置在哪里：动态修改canvas的宽高：通过旋转的角度值、最大宽度值以及勾股定理一一计算宽度和高度，首先我们需要把旋转的角度转换为弧度值（公式：/180角度，也就是 (Math.PI*settings.deg!) / 180 ），我们先看看下图：转化图像：通过对当前canvas配置转化为图形url，然后配置元素的style属性。我们都知道，如果用户需要修改html一般都会浏览器调式中的Elements中修改我们网页的元素的样式就可以，也就是我们只要监听到DOM元素被修改就可以，控制修改DOM无法生效。由于修改DOM有两种方法：修改元素节点和修改元素属性，所以只要控制元素的相关DOM方法中进行相应操作就可以实现我们的禁止。而通过disablePatchWaterMask方法主要做了三件事情：创建MutationObserver实例：也就是实例化MutationObserver，这样才能调用MutationObserver中的observe函数实现DOM修改的监听。创建MutationObserver回调函数：通过传入的两个参数，一个当前元素集合和observer监听器。监听需要监听的元素：调用observer需要传入监听元素以及监听配置，这个可以参考一下MutationObserver用法配置。从水印到取消水印（勾选到不勾选background-image）：我们发现mutation.target属性中的oldValue值就是我们设置style。从取消水印到恢复水印（不勾选到勾选background-image）：我们发现mutation.target属性中的oldValue值的background-image被注释掉了。从上面两个转化中，我们就可以直接得出直接赋值当勾选到不勾选是监听到DOM修改的oldValue（真正的style），因为这时候获取到的才是真正style，反之就不是了，由于我们不勾选时的oldValue赋值给不勾选时的style，所以当我们不勾选时再转化为勾选时就是真正style，从而实现不管用户怎么操作都不能取消水印。关于“怎么用Vue3指令实现水印背景”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么用Vue3指令实现水印背景”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。

相关推荐: Android中的SharedPreferences怎么使用

本篇内容介绍了“Android中的SharedPreferences怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Android SharedPrefe…