From 1b1845f9c66e2caf2b3cdc9773104cf1f05330dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Tue, 18 Jan 2022 11:54:35 +0800 Subject: [PATCH 1/2] feat:add watermark --- src/editor/core/draw/Draw.ts | 7 ++++++ src/editor/core/draw/frame/Watermark.ts | 33 +++++++++++++++++++++++++ src/editor/index.ts | 12 ++++++++- src/editor/interface/Editor.ts | 2 ++ src/editor/interface/Watermark.ts | 7 ++++++ src/main.ts | 3 +++ 6 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 src/editor/core/draw/frame/Watermark.ts create mode 100644 src/editor/interface/Watermark.ts diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index daa0967..7303b55 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -31,6 +31,7 @@ import { Header } from "./frame/Header" import { SuperscriptParticle } from "./particle/Superscript" import { SubscriptParticle } from "./particle/Subscript" import { SeparatorParticle } from "./particle/Separator" +import { Watermark } from "./frame/Watermark" export class Draw { @@ -59,6 +60,7 @@ export class Draw { private tableParticle: TableParticle private tableTool: TableTool private pageNumber: PageNumber + private waterMark: Watermark private header: Header private hyperlinkParticle: HyperlinkParticle private separatorParticle: SeparatorParticle @@ -102,6 +104,7 @@ export class Draw { this.tableParticle = new TableParticle(this) this.tableTool = new TableTool(this) this.pageNumber = new PageNumber(this) + this.waterMark = new Watermark(this) this.header = new Header(this) this.hyperlinkParticle = new HyperlinkParticle(this) this.separatorParticle = new SeparatorParticle() @@ -697,6 +700,10 @@ export class Draw { if (this.searchMatchList) { this.search.render(ctx, pageNo) } + // 绘制水印 + if (this.options.watermark.data) { + this.waterMark.render(ctx) + } } public render(payload?: IDrawOption) { diff --git a/src/editor/core/draw/frame/Watermark.ts b/src/editor/core/draw/frame/Watermark.ts new file mode 100644 index 0000000..9becb98 --- /dev/null +++ b/src/editor/core/draw/frame/Watermark.ts @@ -0,0 +1,33 @@ +import { IEditorOption } from "../../.." +import { DeepRequired } from "../../../interface/Common" +import { Draw } from "../Draw" + +export class Watermark { + + private draw: Draw + private options: DeepRequired + + constructor(draw: Draw) { + this.draw = draw + this.options = >draw.getOptions() + } + + public render(ctx: CanvasRenderingContext2D) { + const { watermark: { data, opacity, font, size, color }, scale } = this.options + const width = this.draw.getWidth() + const height = this.draw.getHeight() + const x = width / 2 + const y = height / 2 + ctx.save() + ctx.globalAlpha = opacity + ctx.font = `${size * scale}px ${font}` + ctx.fillStyle = color + // 移动到中心位置再旋转 + const measureText = ctx.measureText(data) + ctx.translate(x, y) + ctx.rotate(-45 * Math.PI / 180) + ctx.fillText(data, - measureText.width / 2, measureText.actualBoundingBoxAscent - size / 2) + ctx.restore() + } + +} \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index 0098f25..a81a7e8 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -16,6 +16,7 @@ import { IContextMenuContext, IRegisterContextMenu } from './interface/contextme import { EditorComponent } from './dataset/enum/Editor' import { EDITOR_COMPONENT } from './dataset/constant/Editor' import { IHeader } from './interface/Header' +import { IWatermark } from './interface/Watermark' export default class Editor { @@ -31,6 +32,14 @@ export default class Editor { font: 'Yahei', ...options.header } + const waterMarkOptions: Required = { + data: '', + color: '#AEB5C0', + opacity: 0.3, + size: 200, + font: 'Yahei', + ...options.watermark + } const editorOptions: Required = { defaultType: 'TEXT', defaultFont: 'Yahei', @@ -62,7 +71,8 @@ export default class Editor { defaultHyperlinkColor: '#0000FF', headerTop: 50, ...options, - header: headerOptions + header: headerOptions, + watermark: waterMarkOptions } formatElementList(elementList) // 监听 diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index 16f4d02..e52f76b 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -1,5 +1,6 @@ import { IElement } from ".." import { IHeader } from "./Header" +import { IWatermark } from "./Watermark" export interface IEditorOption { defaultType?: string; @@ -32,6 +33,7 @@ export interface IEditorOption { defaultHyperlinkColor?: string; headerTop?: number; header?: IHeader; + watermark?: IWatermark; } export interface IEditorResult { diff --git a/src/editor/interface/Watermark.ts b/src/editor/interface/Watermark.ts new file mode 100644 index 0000000..4be763c --- /dev/null +++ b/src/editor/interface/Watermark.ts @@ -0,0 +1,7 @@ +export interface IWatermark { + data: string; + color?: string; + opacity?: number; + size?: number; + font?: string; +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index ec08f85..5d6eb76 100644 --- a/src/main.ts +++ b/src/main.ts @@ -211,6 +211,9 @@ window.onload = function () { margins: [100, 120, 100, 120], header: { data: '人民医院门诊' + }, + watermark: { + data: '严禁复制' } }) console.log('实例: ', instance) From 0731d39c1fc882616712d08b5eae99e6a2458d1e Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Wed, 19 Jan 2022 15:03:51 +0800 Subject: [PATCH 2/2] feat:add watermark --- index.html | 9 +++++ src/assets/images/watermark.svg | 1 + src/components/dialog/dialog.css | 1 + src/editor/core/command/Command.ts | 13 ++++++ src/editor/core/command/CommandAdapt.ts | 27 +++++++++++++ src/editor/core/event/CanvasEvent.ts | 3 +- src/editor/dataset/constant/Header.ts | 8 ++++ src/editor/dataset/constant/Watermark.ts | 9 +++++ src/editor/index.ts | 13 ++---- src/editor/interface/Editor.ts | 1 + src/main.ts | 50 +++++++++++++++++++++++- src/style.css | 8 ++++ 12 files changed, 132 insertions(+), 11 deletions(-) create mode 100644 src/assets/images/watermark.svg create mode 100644 src/editor/dataset/constant/Header.ts create mode 100644 src/editor/dataset/constant/Watermark.ts diff --git a/index.html b/index.html index 72c5e9e..e687f0a 100644 --- a/index.html +++ b/index.html @@ -145,6 +145,15 @@ +
+ +
+
    +
  • 添加水印
    • +
  • 删除水印
    • +
+
+
diff --git a/src/assets/images/watermark.svg b/src/assets/images/watermark.svg new file mode 100644 index 0000000..68de565 --- /dev/null +++ b/src/assets/images/watermark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/dialog/dialog.css b/src/components/dialog/dialog.css index a4b08d2..ec7d546 100644 --- a/src/components/dialog/dialog.css +++ b/src/components/dialog/dialog.css @@ -55,6 +55,7 @@ height: 30px; display: flex; align-items: center; + justify-content: space-between; } .dialog-option__item span { diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 53415e2..e65d609 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -1,6 +1,7 @@ import { IElement } from "../.." import { RowFlex } from "../../dataset/enum/Row" import { IDrawImagePayload } from "../../interface/Draw" +import { IWatermark } from "../../interface/Watermark" import { CommandAdapt } from "./CommandAdapt" export class Command { @@ -41,6 +42,8 @@ export class Command { private static image: Function private static hyperlink: Function private static separator: Function + private static addWatermark: Function + private static deleteWatermark: Function private static search: Function private static print: Function private static pageScaleRecovery: Function @@ -84,6 +87,8 @@ export class Command { Command.image = adapt.image.bind(adapt) Command.hyperlink = adapt.hyperlink.bind(adapt) Command.separator = adapt.separator.bind(adapt) + Command.addWatermark = adapt.addWatermark.bind(adapt) + Command.deleteWatermark = adapt.deleteWatermark.bind(adapt) Command.search = adapt.search.bind(adapt) Command.print = adapt.print.bind(adapt) Command.pageScaleRecovery = adapt.pageScaleRecovery.bind(adapt) @@ -239,6 +244,14 @@ export class Command { return Command.separator(payload) } + public executeAddWatermark(payload: IWatermark) { + return Command.addWatermark(payload) + } + + public executeDeleteWatermark() { + return Command.deleteWatermark() + } + public executeSearch(payload: string | null) { return Command.search(payload) } diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 6fae94f..cc61934 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -1,5 +1,6 @@ import { ZERO } from "../../dataset/constant/Common" import { EDITOR_ELEMENT_STYLE_ATTR, TEXTLIKE_ELEMENT_TYPE } from "../../dataset/constant/Element" +import { defaultWatermarkOption } from "../../dataset/constant/Watermark" import { EditorContext } from "../../dataset/enum/Editor" import { ElementType } from "../../dataset/enum/Element" import { ElementStyleKey } from "../../dataset/enum/ElementStyle" @@ -11,6 +12,7 @@ import { ISearchResult, ISearchResultRestArgs } from "../../interface/Search" import { IColgroup } from "../../interface/table/Colgroup" import { ITd } from "../../interface/table/Td" import { ITr } from "../../interface/table/Tr" +import { IWatermark } from "../../interface/Watermark" import { getUUID } from "../../utils" import { formatElementList } from "../../utils/element" import { printImageBase64 } from "../../utils/print" @@ -920,6 +922,31 @@ export class CommandAdapt { this.draw.render({ curIndex }) } + public addWatermark(payload: IWatermark) { + const options = this.draw.getOptions() + const { color, size, opacity, font } = defaultWatermarkOption + options.watermark.data = payload.data + options.watermark.color = payload.color || color + options.watermark.size = payload.size || size + options.watermark.opacity = payload.opacity || opacity + options.watermark.font = payload.font || font + this.draw.render({ + isSetCursor: false, + isSubmitHistory: false + }) + } + + public deleteWatermark() { + const options = this.draw.getOptions() + if (options.watermark && options.watermark.data) { + options.watermark = { ...defaultWatermarkOption } + this.draw.render({ + isSetCursor: false, + isSubmitHistory: false + }) + } + } + public image(payload: IDrawImagePayload) { const { startIndex, endIndex } = this.range.getRange() if (!~startIndex && !~endIndex) return diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index 7f487fa..f0003a8 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/src/editor/core/event/CanvasEvent.ts @@ -462,7 +462,7 @@ export class CanvasEvent { public save(): IEditorResult { // 配置 - const { width, height, margins } = this.draw.getOptions() + const { width, height, margins, watermark } = this.draw.getOptions() // 数据 const elementList = this.draw.getOriginalElementList() const data = zipElementList(elementList) @@ -471,6 +471,7 @@ export class CanvasEvent { width, height, margins, + watermark: watermark.data ? watermark : undefined, data } } diff --git a/src/editor/dataset/constant/Header.ts b/src/editor/dataset/constant/Header.ts new file mode 100644 index 0000000..c946dc8 --- /dev/null +++ b/src/editor/dataset/constant/Header.ts @@ -0,0 +1,8 @@ +import { IHeader } from "../../interface/Header" + +export const defaultHeaderOption: Readonly> = { + data: '', + color: '#AAAAAA', + size: 14, + font: 'Yahei' +} \ No newline at end of file diff --git a/src/editor/dataset/constant/Watermark.ts b/src/editor/dataset/constant/Watermark.ts new file mode 100644 index 0000000..a905c15 --- /dev/null +++ b/src/editor/dataset/constant/Watermark.ts @@ -0,0 +1,9 @@ +import { IWatermark } from "../../interface/Watermark" + +export const defaultWatermarkOption: Readonly> = { + data: '', + color: '#AEB5C0', + opacity: 0.3, + size: 200, + font: 'Yahei' +} \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index a81a7e8..41189d6 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -17,6 +17,8 @@ import { EditorComponent } from './dataset/enum/Editor' import { EDITOR_COMPONENT } from './dataset/constant/Editor' import { IHeader } from './interface/Header' import { IWatermark } from './interface/Watermark' +import { defaultHeaderOption } from './dataset/constant/Header' +import { defaultWatermarkOption } from './dataset/constant/Watermark' export default class Editor { @@ -26,18 +28,11 @@ export default class Editor { constructor(container: HTMLDivElement, elementList: IElement[], options: IEditorOption = {}) { const headerOptions: Required = { - data: '', - color: '#AAAAAA', - size: 14, - font: 'Yahei', + ...defaultHeaderOption, ...options.header } const waterMarkOptions: Required = { - data: '', - color: '#AEB5C0', - opacity: 0.3, - size: 200, - font: 'Yahei', + ...defaultWatermarkOption, ...options.watermark } const editorOptions: Required = { diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index e52f76b..9c9aef1 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -41,5 +41,6 @@ export interface IEditorResult { width: number; height: number; margins: [top: number, right: number, bottom: number, left: number]; + watermark?: IWatermark; data: IElement[]; } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 5d6eb76..9297fc5 100644 --- a/src/main.ts +++ b/src/main.ts @@ -213,7 +213,8 @@ window.onload = function () { data: '人民医院门诊' }, watermark: { - data: '严禁复制' + data: 'CANVAS-EDITOR', + size: 120 } }) console.log('实例: ', instance) @@ -485,6 +486,53 @@ window.onload = function () { } instance.command.executeSeparator(payload) } + const watermarkDom = document.querySelector('.menu-item__watermark')! + const watermarkOptionDom = watermarkDom.querySelector('.options')! + watermarkDom.onclick = function () { + console.log('watermark') + watermarkOptionDom.classList.toggle('visible') + } + watermarkOptionDom.onmousedown = function (evt) { + const li = evt.target as HTMLLIElement + const menu = li.dataset.menu! + watermarkOptionDom.classList.toggle('visible') + if (menu === 'add') { + new Dialog({ + title: '水印', + data: [{ + type: 'text', + label: '内容', + name: 'data', + placeholder: '请输入内容' + }, { + type: 'color', + label: '颜色', + name: 'color', + value: '#AEB5C0' + }, { + type: 'number', + label: '字体大小', + name: 'size', + value: '120' + }], + onConfirm: (payload) => { + const nullableIndex = payload.findIndex(p => !p.value) + if (~nullableIndex) return + const watermark = payload.reduce((pre, cur) => { + pre[cur.name] = cur.value + return pre + }, {}) + instance.command.executeAddWatermark({ + data: watermark.data, + color: watermark.color, + size: Number(watermark.size) + }) + } + }) + } else { + instance.command.executeDeleteWatermark() + } + } const searchCollapseDom = document.querySelector('.menu-item__search__collapse') const searchInputDom = document.querySelector('.menu-item__search__collapse__search input') document.querySelector('.menu-item__search')!.onclick = function () { diff --git a/src/style.css b/src/style.css index 548f585..9d0b76e 100644 --- a/src/style.css +++ b/src/style.css @@ -413,6 +413,14 @@ ul { background-image: url('./assets/images/line-dash-dot-dot.svg'); } +.menu-item__watermark>i { + background-image: url('./assets/images/watermark.svg'); +} + +.menu-item__watermark { + position: relative; +} + .menu-item__search { position: relative; }