如何在 uni-app 中实现暗水印？-icode9专业技术文章分享

本文主要是介绍如何在 uni-app 中实现暗水印？-icode9专业技术文章分享，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

实现暗水印的步骤

1. 使用 canvas 绘制水印。
2. 将水印设置为固定定位，确保覆盖到页面内容的后面。
3. 通过调整透明度实现暗水印的效果。

示例代码

1. 创建水印组件

我们将创建一个名为 Watermark.vue 的组件，这个组件将负责生成水印。

<!-- components/Watermark.vue -->
<template>
  <view class="watermark-container">
    <canvas canvas-id="watermarkCanvas" class="watermark-canvas"></canvas>
  </view>
</template>

<script>
export default {
  name: 'Watermark',
  props: {
    text: {
      type: String,
      default: '暗水印示例'
    },
    fontSize: {
      type: String,
      default: '40px'
    },
    opacity: {
      type: Number,
      default: 0.1 // 设定默认透明度
    }
  },
  mounted() {
    this.drawWatermark();
    // Resize事件处理
    window.addEventListener('resize', this.drawWatermark);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.drawWatermark); // 清理事件
  },
  methods: {
    drawWatermark() {
      const ctx = uni.createCanvasContext('watermarkCanvas', this);
      const { text, fontSize, opacity } = this;

      // 清空画布
      const canvasWidth = uni.upx2px(750);
      const canvasHeight = uni.upx2px(1334);
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);

      ctx.font = `${fontSize} Arial`;
      ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`; // 设置水印的颜色和透明度
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';

      const xSpacing = 200; // 水印间隔设定
      const ySpacing = 200; // 水印的垂直间隔

      // 绘制水印
      for (let x = 0; x < canvasWidth; x += xSpacing) {
        for (let y = 0; y < canvasHeight; y += ySpacing) {
          ctx.save();
          ctx.translate(x, y); // 移动到水印坐标
          ctx.rotate(-Math.PI / 6); // 旋转水印
          ctx.fillText(text, 0, 0);
          ctx.restore();
        }
      }

      ctx.draw(); // 绘制到画布
    }
  }
}
</script>

<style scoped>
.watermark-container {
  position: fixed; /* 固定到页面 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999; /* 确保在内容上面 */
}

.watermark-canvas {
  width: 100%;
  height: 100%;
}
</style>

Copy
Vue

2. 在页面中使用水印组件

接下来，我们需要在一个页面中引入并使用这个水印组件。这里我们以 pages/index/index.vue 为例。

<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <watermark text="这是暗水印示例" :opacity="0.1" fontSize="50px"></watermark>
    <view class="content">
      <text>这是页面的核心内容。</text>
      <button @click="handleClick">点击我</button>
    </view>
  </view>
</template>

<script>
import Watermark from '@/components/Watermark.vue'; // 引入水印组件

export default {
  components: {
    Watermark
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: '按钮被点击了！',
        icon: 'none'
      });
    }
  }
}
</script>

<style>
.container {
  position: relative; /* 相对定位确保内容在水印上方 */
  width: 100%;
  height: 100vh; /* 设置容器高度 */
  overflow: hidden; /* 隐藏溢出内容 */
}

.content {
  position: relative; /* 确保内容在水印之上 */
  z-index: 1; /* 确保内容在水印之上 */
  padding: 20px;
}
</style>

Copy
Vue

代码解析

1. Watermark.vue 组件：

   • 使用 canvas 绘制水印文本，通过 props 接受水印文本、字体大小和透明度。
   • 在 mounted 钩子中调用 drawWatermark 创建水印。
   • 在 drawWatermark 方法中，使用 fillText 方法绘制水印，并通过 translate 和 rotate 方法设置位置和旋转。

2. index.vue 页面：

   • 引入 Watermark 组件，并配置其属性。
   • 页面同时容纳其他内容，使用 z-index 确保内容不被水印覆盖。

3. 样式：

   • watermark-container 的样式为 fixed，以覆盖整个页面。
   • 使用透明度控制水印的显现程度，设置 opacity 的值可以调节水印的清晰程度。

运行小程序

1. 将项目在 HBuilderX 中打开并运行。
2. 你将看到页面上有一个暗水印，同时可以正常点击和操作页面内容。

标签： 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

这篇关于如何在 uni-app 中实现暗水印？-icode9专业技术文章分享的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！