From a2bec8eda9bff8af7819a9ee10901bfd002f532a Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Wed, 2 Jun 2021 18:38:59 +0800 Subject: [PATCH] feat: core implement elements' border render --- packages/core/example/lib/data/image.js | 6 ++++ packages/core/example/lib/data/rect.js | 20 +++++++---- packages/core/src/lib/draw/base.ts | 46 +++++++++++++++++++++++-- packages/core/src/lib/element.ts | 9 ++--- packages/core/src/lib/helper.ts | 25 +++++++------- packages/core/src/lib/renderer.ts | 7 +++- packages/types/src/lib/element.ts | 2 +- 7 files changed, 88 insertions(+), 27 deletions(-) diff --git a/packages/core/example/lib/data/image.js b/packages/core/example/lib/data/image.js index ee93205..b6e34cb 100644 --- a/packages/core/example/lib/data/image.js +++ b/packages/core/example/lib/data/image.js @@ -9,6 +9,9 @@ const data = { w: 200, h: 100, type: 'image', + radius: 20, + borderWidth: 10, + borderColor: '#bd0b64', // angle: 30, // angle: 0, desc: { @@ -22,6 +25,9 @@ const data = { w: 200, h: 120, // angle: 30, + radius: 20, + borderWidth: 10, + borderColor: '#bd0b64', type: 'image', desc: { src: './images/chart.png', diff --git a/packages/core/example/lib/data/rect.js b/packages/core/example/lib/data/rect.js index f34e336..9975687 100644 --- a/packages/core/example/lib/data/rect.js +++ b/packages/core/example/lib/data/rect.js @@ -4,15 +4,14 @@ const data = { elements: [ { name: 'rect-001', - // x: 10, - // y: 10, - x: 0, - y: 0, + x: 10, + y: 10, w: 200, h: 100, type: 'rect', - // angle: 30, - // angle: 0, + radius: 20, + borderWidth: 10, + borderColor: '#bd0b64', desc: { color: '#f0f0f0', } @@ -25,6 +24,9 @@ const data = { h: 120, // angle: 30, type: 'rect', + radius: 60, + borderWidth: 10, + borderColor: '#bd0b64', desc: { color: '#cccccc', } @@ -37,6 +39,9 @@ const data = { h: 20, type: 'rect', angle: 80, + radius: 20, + borderWidth: 10, + borderColor: '#bd0b64', desc: { color: '#c0c0c0', } @@ -48,6 +53,9 @@ const data = { w: 200, h: 100, type: 'rect', + radius: 20, + borderWidth: 10, + borderColor: '#bd0b64', desc: { color: '#e0e0e0', } diff --git a/packages/core/src/lib/draw/base.ts b/packages/core/src/lib/draw/base.ts index f00285e..f4ce9be 100644 --- a/packages/core/src/lib/draw/base.ts +++ b/packages/core/src/lib/draw/base.ts @@ -6,7 +6,7 @@ import { import util from '@idraw/util'; import { rotateElement } from './../transform'; -const { istype } = util; +const { istype, color } = util; export function clearContext(ctx: TypeContext) { ctx.setFillStyle('rgb(0 0 0 / 0%)'); @@ -25,9 +25,11 @@ export function drawBox( pattern: string | CanvasPattern | null, ): void { clearContext(ctx); + drawBoxBorder(ctx, elem); rotateElement(ctx, elem, () => { - const r: number = elem.radius || 0; const { x, y, w, h } = elem; + let r: number = elem.radius || 0; + r = Math.min(r, w / 2, h / 2); ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); @@ -41,5 +43,43 @@ export function drawBox( ctx.setFillStyle(pattern as CanvasPattern); } ctx.fill(); - }) + }); } + + +function drawBoxBorder( + ctx: TypeContext, + elem: TypeElement, +): void { + clearContext(ctx); + rotateElement(ctx, elem, () => { + if (!(elem.borderWidth && elem.borderWidth > 0)) { + return; + } + let bw = elem.borderWidth; + let borderColor: string = '#000000'; + if (color.isColorStr(elem.borderColor) === true) { + borderColor = elem.borderColor as string; + } + const x = elem.x - bw / 2; + const y = elem.y - bw / 2; + const w = elem.w + bw; + const h = elem.h + bw; + + let r: number = elem.radius || 0; + r = Math.min(r, w / 2, h / 2); + if (r < w / 2 && r < h / 2) { + r = r + bw / 2 + } + ctx.beginPath(); + ctx.setLineWidth(bw); + ctx.setStrokeStyle(borderColor) + ctx.moveTo(x + r, y); + ctx.arcTo(x + w, y, x + w, y + h, r); + ctx.arcTo(x + w, y + h, x, y + h, r); + ctx.arcTo(x, y + h, x, y, r); + ctx.arcTo(x, y, x + w, y, r); + ctx.closePath(); + ctx.stroke(); + }) +} \ No newline at end of file diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index c8bac20..cbac9c5 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -34,13 +34,14 @@ export class Element { let uuid = null; for (let i = data.elements.length - 1; i >= 0; i--) { const ele = data.elements[i]; + const bw = ele.borderWidth || 0; rotateElement(ctx, ele, () => { ctx.beginPath(); - ctx.moveTo(ele.x, ele.y); - ctx.lineTo(ele.x + ele.w, ele.y); - ctx.lineTo(ele.x + ele.w, ele.y + ele.h); - ctx.lineTo(ele.x, ele.y + ele.h); + ctx.moveTo(ele.x - bw, ele.y - bw); + ctx.lineTo(ele.x + ele.w + bw, ele.y - bw); + ctx.lineTo(ele.x + ele.w + bw, ele.y + ele.h + bw); + ctx.lineTo(ele.x - bw, ele.y + ele.h + bw); ctx.lineTo(ele.x, ele.y); ctx.rect(ele.x, ele.y, ele.w, ele.h); diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index 37bd068..b076d3f 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -103,41 +103,42 @@ export class Helper implements TypeHelper { const lineWidth = this._coreConfig.elementWrapper.lineWidth / scale; const lineDash = this._coreConfig.elementWrapper.lineDash.map(n => (n / scale)); const rotateLimit = 12; + const borderWidth = elem.borderWidth || 0; const wrapper: TypeHelperConfig['selectedElementWrapper'] = { uuid, dotSize: dotSize, dots: { topLeft: { - x: elem.x - dotSize, - y: elem.y - dotSize, + x: elem.x - dotSize - borderWidth, + y: elem.y - dotSize - borderWidth, }, top: { x: elem.x + elem.w / 2, - y: elem.y - dotSize, + y: elem.y - dotSize - borderWidth, }, topRight: { - x: elem.x + elem.w + dotSize, - y: elem.y - dotSize, + x: elem.x + elem.w + dotSize + borderWidth, + y: elem.y - dotSize - borderWidth, }, right: { - x: elem.x + elem.w + dotSize, + x: elem.x + elem.w + dotSize + borderWidth, y: elem.y + elem.h / 2, }, bottomRight: { - x: elem.x + elem.w + dotSize, - y: elem.y + elem.h + dotSize, + x: elem.x + elem.w + dotSize + borderWidth, + y: elem.y + elem.h + dotSize + borderWidth, }, bottom: { x: elem.x + elem.w / 2, - y: elem.y + elem.h + dotSize, + y: elem.y + elem.h + dotSize + borderWidth, }, bottomLeft: { - x: elem.x - dotSize, - y: elem.y + elem.h + dotSize, + x: elem.x - dotSize - borderWidth, + y: elem.y + elem.h + dotSize + borderWidth, }, left: { - x: elem.x - dotSize, + x: elem.x - dotSize - borderWidth, y: elem.y + elem.h / 2, }, rotate: { diff --git a/packages/core/src/lib/renderer.ts b/packages/core/src/lib/renderer.ts index f6e9e16..51a8c18 100644 --- a/packages/core/src/lib/renderer.ts +++ b/packages/core/src/lib/renderer.ts @@ -50,6 +50,7 @@ export class Renderer { private _drawFrame() { requestAnimationFrame(() => { + // console.log('------ render frame ------', this._loader.isComplete()) let item: QueueItem | undefined = this._queue[0]; if (this._queue.length > 1) { item = this._queue.shift(); @@ -61,7 +62,11 @@ export class Renderer { drawContext(ctx, item.data, item.helper, this._loader); this._board.draw(); this._retainQueueOneItem(); - this._drawFrame(); + if (this._queue.length > 1) { + this._drawFrame(); + } else { + this._status = DrawStatus.FREE + } } else { this._status = DrawStatus.FREE } diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts index a00aada..3a88df9 100644 --- a/packages/types/src/lib/element.ts +++ b/packages/types/src/lib/element.ts @@ -11,7 +11,7 @@ type TypeElement = { angle?: number; radius?: number; borderWidth?: number; - borderColor?: number; + borderColor?: string; desc: TypeElemDesc[T]; }