diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index a9bc980..23d57cd 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -28,6 +28,8 @@ import { ISearchResult } from "../../interface/Search" import { TableTool } from "./particle/table/TableTool" import { HyperlinkParticle } from "./particle/HyperlinkParticle" import { Header } from "./frame/Header" +import { SuperscriptParticle } from "./particle/Superscript" +import { SubscriptParticle } from "./particle/Subscript" export class Draw { @@ -58,6 +60,8 @@ export class Draw { private pageNumber: PageNumber private header: Header private hyperlinkParticle: HyperlinkParticle + private superscriptParticle: SuperscriptParticle + private subscriptParticle: SubscriptParticle private rowList: IRow[] private painterStyle: IElementStyle | null @@ -98,6 +102,9 @@ export class Draw { this.pageNumber = new PageNumber(this) this.header = new Header(this) this.hyperlinkParticle = new HyperlinkParticle(this) + this.superscriptParticle = new SuperscriptParticle() + this.subscriptParticle = new SubscriptParticle() + new GlobalObserver(this) this.canvasEvent = new CanvasEvent(this) @@ -441,6 +448,11 @@ export class Draw { metrics.width = fontMetrics.width * scale metrics.boundingBoxAscent = (element.value === ZERO ? defaultSize : fontMetrics.actualBoundingBoxAscent) * scale metrics.boundingBoxDescent = fontMetrics.actualBoundingBoxDescent * scale + if (element.type === ElementType.SUPERSCRIPT) { + metrics.boundingBoxAscent += metrics.height / 2 + } else if (element.type === ElementType.SUBSCRIPT) { + metrics.boundingBoxDescent += metrics.height / 2 + } } const ascent = metrics.boundingBoxAscent + rowMargin const descent = metrics.boundingBoxDescent + rowMargin @@ -545,6 +557,12 @@ export class Draw { } else if (element.type === ElementType.HYPERLINK) { this.textParticle.complete() this.hyperlinkParticle.render(ctx, element, x, y + offsetY) + } else if (element.type === ElementType.SUPERSCRIPT) { + this.textParticle.complete() + this.superscriptParticle.render(ctx, element, x, y + offsetY) + } else if (element.type === ElementType.SUBSCRIPT) { + this.textParticle.complete() + this.subscriptParticle.render(ctx, element, x, y + offsetY) } else { this.textParticle.record(ctx, element, x, y + offsetY) } diff --git a/src/editor/core/draw/particle/Subscript.ts b/src/editor/core/draw/particle/Subscript.ts new file mode 100644 index 0000000..6525639 --- /dev/null +++ b/src/editor/core/draw/particle/Subscript.ts @@ -0,0 +1,15 @@ +import { IRowElement } from "../../../interface/Row" + +export class SubscriptParticle { + + public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) { + ctx.save() + ctx.font = element.style + if (element.color) { + ctx.fillStyle = element.color + } + ctx.fillText(element.value, x, y + element.metrics.height / 2) + ctx.restore() + } + +} \ No newline at end of file diff --git a/src/editor/core/draw/particle/Superscript.ts b/src/editor/core/draw/particle/Superscript.ts new file mode 100644 index 0000000..17fd710 --- /dev/null +++ b/src/editor/core/draw/particle/Superscript.ts @@ -0,0 +1,15 @@ +import { IRowElement } from "../../../interface/Row" + +export class SuperscriptParticle { + + public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) { + ctx.save() + ctx.font = element.style + if (element.color) { + ctx.fillStyle = element.color + } + ctx.fillText(element.value, x, y - element.metrics.height / 2) + ctx.restore() + } + +} \ No newline at end of file diff --git a/src/editor/dataset/enum/Element.ts b/src/editor/dataset/enum/Element.ts index 4610f8f..e2a10f1 100644 --- a/src/editor/dataset/enum/Element.ts +++ b/src/editor/dataset/enum/Element.ts @@ -2,5 +2,7 @@ export enum ElementType { TEXT = 'text', IMAGE = 'image', TABLE = 'table', - HYPERLINK = 'hyperlink' + HYPERLINK = 'hyperlink', + SUPERSCRIPT = 'superscript', + SUBSCRIPT = 'subscript' } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 844a75f..c2f3449 100644 --- a/src/main.ts +++ b/src/main.ts @@ -81,7 +81,17 @@ window.onload = function () { }], url: 'https://hufe.club/canvas-editor' }) - data.splice(592, 0, { + data.splice(383, 0, { + value: '轻', + size: 10, + type: ElementType.SUBSCRIPT + }) + data.splice(392, 0, { + value: '急', + size: 10, + type: ElementType.SUPERSCRIPT + }) + data.splice(594, 0, { value: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAAAgCAYAAAB5JtSmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQ0SURBVGhD7dhrUSNBFAVgvKACEVjAAhJQgAIUYAABGEAABvgfAdn6UnWou01PppOZhIXNj1P9vo9zH5PK1Waz2V5wWlxIPgMuJJ8Bi0h+fn7eXl9fb29ubrYPDw/dO/8DHh8fu/vB4kym4Orqaofb29vund8OSSbhemewSrugBMnG3vlvw9vb265yn56edmtz/t/f33+5C8MkixQSZSsl9UzLOHUmcwTYAN/Rpl5eXnY+pnIB0Xd3d7s5m3rvDsrkCGszNiQ7r/tr4v39fSc/uipOqRcqufTHBiO78GGdzG5xcLtIFmVde7L9NsvXRo9s84+Pj+79pUAwn5GcD1wIz5r+fYGeJdnjGiF9hwL7iWAcfX19/evtKVHJXrtN8Rf4A3TVczqhrut5i1mSZQgnIriSWtdzP2N+EvIhi3/GWqHWtWXuy2IYbheiKarJZIZknkxyrryc2Utrgal+9S8iScUXIx/3kcxfe/jotcuDezLFlIbARDrzHpytXdKnQr4xyc74Vu9YV5Ih2Q/tT7mDSEYw5ZU4wu3nJx64k/1z9umlUG0hah/JSbC6Jzi5exDJWoTHERoBxu8uf/pT1j3HDkUIJitjbRfRA/iwVzlgy1RCfSF5ili9xj7BUWKs9wJZ3MpditYu+lsc+/PRx53cVF9Pdg/syE9Hb6cS75PkmhUEUFofmTvLGEXKimHueJP9Y3swWQwGLUiA9xEbHKuvgs4pPe1+1myTAKlw81buJ8kigjAXKauXPLQPhEYgJSEYsgdTUR0BmTVgc6C359wcvKGnBrGO8dO5VlD1ZZ519nrBHvrwKVMCas9hgL0YUI2wV98fC4FqCWizzXyqF44A0ZKLHkilgvPs1zbiTuZIdZ414KvqGCKZYx4zple+MSrrJVncAyL02/TOqncJwVMglx5zI4QDZ5WPvBGEcNP+7TlEcqJIAQFGsIdQjmZt7MlYA5yiI3pOQTCQXUm2TuVmXgmewxDJQDgl6deJJoU5y7p9uwZagmu1mCvbNoOOBfkhOf6lRZjzPb8qRjBMMiUhM9GNMZQq5/oRXBP7Mlj/i12A7EMIaJGqDcl8I79+/N1xTvdINQ2TDAQSvI9Md479vdqCHKSFQKAfEmgBqCTDkjaSgOZXQkg2jy1ti0xApnBQJo/0obQRipeQXbN3CmxKGQch5xgki4Efghl/kFqzPD//2DnXIodIRpaoETaXxcmwGNO7N4I2Oyuc6b+xK/tL9IH3kY/E+r1JdST4yM+7VUiuJbuPZHBeHZcNvXtziMMV9mRuvUOX8Vg9IFjRx9dUYM3s2oJyNx9ahFfSWwyRHKHG3nmL2q/mojyFVAWnEdi2Hg7OBXwUCCKr1QEtoe0+/9jI3xqIiuF2QRD0zqcwpfQnge9TVSI4tWrNe79shj98F0xDC0N4bTUVF5LPgAvJJ8dm+wcP2iJuZNdC5QAAAABJRU5ErkJggg==`, width: 89, height: 32,