Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 01:58:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: core implement elements' border render

Browse source
This commit is contained in:
chenshenhai 2021-06-02 18:38:59 +08:00
parent b4681c46aa
commit a2bec8eda9
7 changed files with 88 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/core/example/lib/data/image.js
View file

@ -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',

20
packages/core/example/lib/data/rect.js
View file

@ -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',
}

46
packages/core/src/lib/draw/base.ts
View file

@ -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<keyof TypeElemDesc>,
): 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();
})
}

9
packages/core/src/lib/element.ts
View file

@ -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);

25
packages/core/src/lib/helper.ts
View file

@ -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: {

7
packages/core/src/lib/renderer.ts
View file

@ -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
}

2
packages/types/src/lib/element.ts
View file

@ -11,7 +11,7 @@ type TypeElement<T extends keyof TypeElemDesc> = {
angle?: number;
radius?: number;
borderWidth?: number;
borderColor?: number;
borderColor?: string;
desc: TypeElemDesc[T];
}