@anycms/watermarker

Angular 版本水印指令

安装

npm install @anycms/watermark --save 或 yarn add @anycms/watermark

使用

// 业务模块
import { WaterMarkerModule } from '@anycms/watermark';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    WaterMarkerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

//业务html，水印宽高是根据元素的宽高定的，请通过css设置元素的宽高
<div class="div" cmsWaterMarker [options]="options" [zIndex]="8"></div>

//业务组件
import { Component } from '@angular/core';
import { WaterMarkerOptionModel } from '@anycms/watermark';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  options: WaterMarkerOptionModel = {
    watermarkLabel: '这是一个水印'
  };
}

参数

1. options:WaterMarkerOptionModel; 具体参数如下：
   // 水印文本
   watermarkLabel?: string;
   // 水印起始位置x轴坐标
   watermarkX?: number;
   // 水印起始位置Y轴坐标
   watermarkY?: number;
   // 水印x轴间隔
   watermarkXSpace?: number;
   // 水印y轴间隔
   watermarkYSpace?: number;
   // 水印字体颜色
   watermarkColor?: string;
   // 水印字体大小
   watermarkFontSize?: string;
   // 水印透明度，要求设置在大于等于0.003
   watermarkAlpha?: number;
   // 水印宽度
   watermarkWidth?: number;
   // 水印高度
   watermarkHeight?: number;
   // 水印倾斜度数
   watermarkAngle?: number;
   // 是否显示
   showWaterMark?: boolean;
   // 分割符号
   splitChar?: string;
   

2. zIndex:number; 层级，默认值为999