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

feat: rename element's radius to borderRadius

Browse source
This commit is contained in:
chenshenhai 2021-06-03 14:22:43 +08:00
parent 7b5e21b270
commit f6fbe1b555
6 changed files with 81 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
packages/core/example/lib/data/circle.js Normal file
View file

@ -0,0 +1,68 @@
const data = {
// bgColor: '#ffffff',
elements: [
{
name: 'rect-001',
x: 10,
y: 10,
w: 200,
h: 100,
type: 'circle',
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
desc: {
color: '#f0f0f0',
}
},
{
name: 'rect-002',
x: 80,
y: 80,
w: 200,
h: 120,
// angle: 30,
type: 'rect',
borderRadius: 60,
borderWidth: 10,
borderColor: '#bd0b64',
desc: {
color: '#cccccc',
}
},
{
name: 'rect-003',
x: 160,
y: 160,
w: 200,
h: 20,
type: 'rect',
angle: 80,
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
desc: {
color: '#c0c0c0',
}
},
{
name: 'rect-004',
x: 400 - 10,
y: 300 - 10,
w: 200,
h: 100,
type: 'rect',
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
desc: {
color: '#e0e0e0',
}
}
]
}
export default data;

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

@ -9,7 +9,7 @@ const data = {
w: 200,
h: 100,
type: 'image',
radius: 20,
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
// angle: 30,
@ -25,7 +25,7 @@ const data = {
w: 200,
h: 120,
// angle: 30,
radius: 20,
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
type: 'image',

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

@ -9,7 +9,7 @@ const data = {
w: 200,
h: 100,
type: 'rect',
radius: 20,
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
desc: {
@ -24,7 +24,7 @@ const data = {
h: 120,
// angle: 30,
type: 'rect',
radius: 60,
borderRadius: 60,
borderWidth: 10,
borderColor: '#bd0b64',
desc: {
@ -39,7 +39,7 @@ const data = {
h: 20,
type: 'rect',
angle: 80,
radius: 20,
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
desc: {
@ -53,7 +53,7 @@ const data = {
w: 200,
h: 100,
type: 'rect',
radius: 20,
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
desc: {

8
packages/core/example/lib/data/text.js
View file

@ -9,7 +9,7 @@ const data = {
w: 200,
h: 100,
type: 'text',
radius: 20,
borderRadius: 20,
borderWidth: 2,
borderColor: '#bd0b64',
desc: {
@ -27,7 +27,7 @@ const data = {
h: 120,
// angle: 30,
type: 'text',
radius: 60,
borderRadius: 60,
borderWidth: 10,
borderColor: '#bd0b64',
desc: {
@ -44,7 +44,7 @@ const data = {
// h: 20,
// type: 'text',
// angle: 80,
// radius: 20,
// borderRadius: 20,
// borderWidth: 10,
// borderColor: '#bd0b64',
// desc: {
@ -58,7 +58,7 @@ const data = {
// w: 200,
// h: 100,
// type: 'text',
// radius: 20,
// borderRadius: 20,
// borderWidth: 10,
// borderColor: '#bd0b64',
// desc: {

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

@ -28,7 +28,7 @@ export function drawBox(
drawBoxBorder(ctx, elem);
rotateElement(ctx, elem, () => {
const { x, y, w, h } = elem;
let r: number = elem.radius || 0;
let r: number = elem.borderRadius || 0;
r = Math.min(r, w / 2, h / 2);
ctx.beginPath();
ctx.moveTo(x + r, y);
@ -66,7 +66,7 @@ export function drawBoxBorder(
const w = elem.w + bw;
const h = elem.h + bw;
let r: number = elem.radius || 0;
let r: number = elem.borderRadius || 0;
r = Math.min(r, w / 2, h / 2);
if (r < w / 2 && r < h / 2) {
r = r + bw / 2

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

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