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

feat: add circle element render

Browse source
This commit is contained in:
chenshenhai 2021-07-26 14:45:24 +08:00
parent 7b4afeeb79
commit af6106562d
9 changed files with 149 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/board/src/lib/context.ts
View file

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

58
packages/core/examples/features/lib/data/circle.js
View file

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

39
packages/core/examples/test/circle.html Normal file
View file

@ -0,0 +1,39 @@
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
html,body { margin: 0; padding: 0; }
#mount canvas {
border-right: 1px solid #aaaaaa40;
border-bottom: 1px solid #aaaaaa40;
background-image:
linear-gradient(#aaaaaa40 1px, transparent 0),
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
linear-gradient(#aaa 1px, transparent 0),
linear-gradient(90deg, #aaa 1px, transparent 0);
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
}
</style>
</head>
<body>
<div id="mount"></div>
<script src="./../../dist/index.global.js"></script>
<script type="module">
import data from './../features/lib/data/circle.js';
const { Core } = window.iDraw;
const core = new Core(
document.querySelector('#mount'), {
width: 600,
height: 400,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
});
core.setData(data);
</script>
</body>
</html>

1
packages/core/src/constant/element.ts
View file

@ -4,6 +4,7 @@ const elementTypes = {
'rect': {}, // TODO
'image': {}, // TODO
'svg': {}, // TODO
'circle': {}, // TODO
};
export const elementNames = Object.keys(elementTypes);

52
packages/core/src/lib/draw/circle.ts Normal file
View file

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

5
packages/core/src/lib/draw/index.ts
View file

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

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

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

4
packages/types/src/lib/context.ts
View file

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

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

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