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: clear-style before drawing ctx

Browse source
This commit is contained in:
chenshenhai 2021-06-01 11:02:52 +08:00
parent 3347fbbae8
commit 7c728eec53
2 changed files with 66 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
packages/core/example/lib/data-image.js
View file

@ -3,7 +3,6 @@ const data = {
// bgColor: '#ffffff',
elements: [
{
uuid: '"e93bb349-aa7c-dab6-fa7f-7f2cf809e283',
name: 'image-001',
x: 10,
y: 10,
@ -13,7 +12,64 @@ const data = {
// angle: 30,
// angle: 0,
desc: {
src: './images/computer.png'
src: './images/computer.png',
}
},
{
name: 'image-002',
x: 80,
y: 80,
w: 200,
h: 120,
// angle: 30,
type: 'image',
desc: {
src: './images/chart.png',
}
},
{
name: 'image-003',
x: 160,
y: 160,
w: 200,
h: 20,
type: 'image',
angle: 80,
desc: {
src: './images/phone.png',
}
},
{
name: 'image-004',
x: 400 - 10,
y: 300 - 10,
w: 100,
h: 100,
type: 'image',
desc: {
src: './images/building-001.png',
}
},
{
name: 'image-004',
x: 400 - 40,
y: 300 - 40,
w: 100,
h: 100,
type: 'image',
desc: {
src: './images/building-002.png',
}
},
{
name: 'image-004',
x: 400 - 100,
y: 300 - 100,
w: 100,
h: 100,
type: 'image',
desc: {
src: './images/building-003.png',
}
}
]

8
packages/core/src/lib/draw.ts
View file

@ -18,6 +18,7 @@ export function drawContext(
config: TypeHelperConfig,
loader: Loader,
): void {
clearContext(ctx);
const size = ctx.getSize();
ctx.clearRect(0, 0, size.width, size.height);
@ -44,6 +45,7 @@ export function drawContext(
function drawRect<T extends keyof TypeElemDesc>(ctx: TypeContext, elem: TypeElement<T>) {
clearContext(ctx);
const desc = elem.desc as TypeElemDesc['rect'];
rotateElement(ctx, elem, () => {
ctx.setFillStyle(desc.color);
@ -124,3 +126,9 @@ function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) {
});
}
function clearContext(ctx: TypeContext) {
ctx.setFillStyle('rgb(0 0 0 / 0%)');
ctx.setStrokeStyle('rgb(0 0 0 / 0%)');
}