From af6106562d28ba7a444d68d0baaf7660c7abe26f Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 26 Jul 2021 14:45:24 +0800 Subject: [PATCH] feat: add circle element render --- packages/board/src/lib/context.ts | 12 ++++ .../core/examples/features/lib/data/circle.js | 58 +++++++++++-------- packages/core/examples/test/circle.html | 39 +++++++++++++ packages/core/src/constant/element.ts | 1 + packages/core/src/lib/draw/circle.ts | 52 +++++++++++++++++ packages/core/src/lib/draw/index.ts | 5 ++ packages/core/src/lib/helper.ts | 3 - packages/types/src/lib/context.ts | 4 +- packages/types/src/lib/element.ts | 10 ++-- 9 files changed, 149 insertions(+), 35 deletions(-) create mode 100644 packages/core/examples/test/circle.html create mode 100644 packages/core/src/lib/draw/circle.ts diff --git a/packages/board/src/lib/context.ts b/packages/board/src/lib/context.ts index fd004bd..22912da 100644 --- a/packages/board/src/lib/context.ts +++ b/packages/board/src/lib/context.ts @@ -217,6 +217,18 @@ class Context implements TypeContext { this._ctx.globalAlpha = alpha; } + save() { + this._ctx.save(); + } + + restore() { + this._ctx.restore(); + } + + scale(ratioX: number, ratioY: number) { + this._ctx.scale(ratioX, ratioY); + } + private _doSize(num: number) { return this._opts.devicePixelRatio * num; } diff --git a/packages/core/examples/features/lib/data/circle.js b/packages/core/examples/features/lib/data/circle.js index a84ccd0..c08dc11 100644 --- a/packages/core/examples/features/lib/data/circle.js +++ b/packages/core/examples/features/lib/data/circle.js @@ -2,49 +2,57 @@ const data = { // bgColor: '#ffffff', elements: [ { - name: "rect-001", + name: "circle-001", x: 10, y: 10, - w: 200, + w: 100, h: 100, type: "circle", desc: { color: "#f0f0f0", + borderWidth: 2, + borderColor: '#999999' }, }, { - name: "rect-002", - x: 80, + name: "circle-002", + x: 100, y: 80, w: 200, - h: 120, - // angle: 30, - type: "rect", + h: 100, + angle: 30, + type: "circle", desc: { - color: "#cccccc", + color: "#f0f0f0", + borderWidth: 2, + borderColor: '#666666' }, }, { - name: "rect-003", - x: 160, - y: 160, - w: 200, - h: 20, - type: "rect", - angle: 80, - desc: { - color: "#c0c0c0", - }, - }, - { - name: "rect-004", - x: 400 - 10, - y: 300 - 10, + name: "circle-003", + x: 200, + y: 200, w: 200, h: 100, - type: "rect", + type: "circle", + angle: 0, desc: { - color: "#e0e0e0", + color: "#f0f0f0", + borderWidth: 2, + borderColor: '#666666' + }, + }, + { + name: "circle-004", + x: 220, + y: 80, + w: 300, + h: 300, + type: "circle", + desc: { + color: "#f0f0f0", + borderWidth: 10, + borderColor: '#666666' }, }, ], diff --git a/packages/core/examples/test/circle.html b/packages/core/examples/test/circle.html new file mode 100644 index 0000000..a101827 --- /dev/null +++ b/packages/core/examples/test/circle.html @@ -0,0 +1,39 @@ + + + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/packages/core/src/constant/element.ts b/packages/core/src/constant/element.ts index 5d54fa5..c83b0bc 100644 --- a/packages/core/src/constant/element.ts +++ b/packages/core/src/constant/element.ts @@ -4,6 +4,7 @@ const elementTypes = { 'rect': {}, // TODO 'image': {}, // TODO 'svg': {}, // TODO + 'circle': {}, // TODO }; export const elementNames = Object.keys(elementTypes); diff --git a/packages/core/src/lib/draw/circle.ts b/packages/core/src/lib/draw/circle.ts new file mode 100644 index 0000000..c959de0 --- /dev/null +++ b/packages/core/src/lib/draw/circle.ts @@ -0,0 +1,52 @@ +import { + TypeContext, + TypeElement, +} from '@idraw/types'; +import { rotateElement } from './../transform'; + +export function drawCircle(ctx: TypeContext, elem: TypeElement<'circle'>) { + + rotateElement(ctx, elem, (ctx) => { + const { x, y, w, h, desc } = elem; + const { + color = '#000000', + borderColor = '#000000', + borderWidth + } = desc; + const a = w / 2; + const b = h / 2; + const centerX = x + a; + const centerY = y + b; + const unit = (a > b) ? 1 / a : 1 / b; + if (borderWidth && borderWidth > 0) { + const ba = borderWidth / 2 + a; + const bb = borderWidth / 2 + b; + ctx.beginPath(); + ctx.setStrokeStyle(borderColor); + ctx.setLineWidth(borderWidth) + ctx.moveTo(centerX + ba, centerY); + for(var i = 0; i < 2 * Math.PI; i += unit) { + ctx.lineTo(centerX + ba * Math.cos(i), centerY + bb * Math.sin(i)); + } + ctx.lineTo(centerX + ba, centerY); + ctx.stroke(); + } + + ctx.beginPath(); + ctx.setFillStyle(color); + ctx.moveTo(centerX + a, centerY); + for(var i = 0; i < 2 * Math.PI; i += unit) { + ctx.lineTo(centerX + a * Math.cos(i), centerY + b * Math.sin(i)); + } + ctx.closePath(); + ctx.fill(); + + // ctx.beginPath(); + // ctx.setFillStyle(color); + // ctx.arc(x + a, y + b, r, 0, 2 * Math.PI, false); + // ctx.closePath(); + // ctx.fill(); + + // ctx.scale(1, 1); + }) +} \ No newline at end of file diff --git a/packages/core/src/lib/draw/index.ts b/packages/core/src/lib/draw/index.ts index 1726ee4..e54ba18 100644 --- a/packages/core/src/lib/draw/index.ts +++ b/packages/core/src/lib/draw/index.ts @@ -12,6 +12,7 @@ import { drawRect } from './rect'; import { drawImage } from './image'; import { drawSVG } from './svg'; import { drawText } from './text'; +import { drawCircle } from './circle'; import { drawElementWrapper, drawAreaWrapper, drawElementListWrappers, } from './wrapper'; @@ -54,6 +55,10 @@ export function drawContext( drawSVG(ctx, elem as TypeElement<'svg'>, loader); break; } + case 'circle': { + drawCircle(ctx, elem as TypeElement<'circle'>); + break; + } default: { // nothing break; diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index c1bb8f8..99da9f9 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -160,9 +160,6 @@ export class Helper implements TypeHelper { const uuids: string[] = []; const ctx = this._ctx; - console.log({x, y, w, h}, start, end); - console.log(this._board.getTransform()); - ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + w, y); diff --git a/packages/types/src/lib/context.ts b/packages/types/src/lib/context.ts index 9253b0c..14e5a2e 100644 --- a/packages/types/src/lib/context.ts +++ b/packages/types/src/lib/context.ts @@ -43,7 +43,9 @@ interface TypeContext { fillText(text: string, x: number, y: number, maxWidth?: number | undefined): void; setFont(opts: { fontSize: number, fontFamily?: string, fontWeight?: string }): void setTextBaseline(baseline: CanvasTextBaseline): void; - + save(): void; + restore(): void; + scale(ratioX: number, ratioY: number): void; drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void; drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void; createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null; diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts index 25f3d32..7cf9f52 100644 --- a/packages/types/src/lib/element.ts +++ b/packages/types/src/lib/element.ts @@ -25,7 +25,7 @@ type TypeElemBoxDesc = { type TypeElemDesc = { text: TypeElemDescText, rect: TypeElemDescRect, - // circle: TypeElemDescCircle, + circle: TypeElemDescCircle, image: TypeElemDescImage, svg: TypeElemDescSVG, // paint: TypeElemDescPaint, @@ -46,11 +46,9 @@ type TypeElemDescText = { bgColor: string; } & TypeElemBoxDesc -// type TypeElemDescCircle = { -// r: number; -// x: number; -// y: number; -// } +type TypeElemDescCircle = { + color: string; +} & TypeElemBoxDesc type TypeElemDescImage = { src: string;