tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Optimize layout

Browse Source
This commit is contained in:
pengfei.zhou 2021-11-23 12:13:23 +08:00 committed by osborn
parent eb72ddad4f
commit 93a2ea12f0
1 changed files with 140 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
doric-demo/src/ImageProcessorDemo.tsx
View File

@ -11,6 +11,8 @@ import {
Gravity, Gravity,
createRef, createRef,
loge, loge,
ViewComponent,
HLayout,
} from "doric"; } from "doric";
import { import {
binarization, binarization,
@ -22,6 +24,18 @@ import {
} from "./imageUtils"; } from "./imageUtils";
import { colors } from "./utils"; import { colors } from "./utils";
@ViewComponent
export class Label extends Text {
constructor() {
super();
this.width = 100;
this.height = 40;
this.backgroundColor = colors[1];
this.textColor = Color.WHITE;
this.textSize = 20;
}
}
@Entry @Entry
export class ImageProcessorDemo extends Panel { export class ImageProcessorDemo extends Panel {
build(root: Group): void { build(root: Group): void {
@ -33,7 +47,6 @@ export class ImageProcessorDemo extends Panel {
<Scroller parent={root} layoutConfig={layoutConfig().most()}> <Scroller parent={root} layoutConfig={layoutConfig().most()}>
<VLayout <VLayout
layoutConfig={layoutConfig().mostWidth().fitHeight()} layoutConfig={layoutConfig().mostWidth().fitHeight()}
space={20}
gravity={Gravity.Center} gravity={Gravity.Center}
> >
<Text <Text
@ -52,11 +65,32 @@ export class ImageProcessorDemo extends Panel {
width={(Environment.screenWidth / 5) * 4} width={(Environment.screenWidth / 5) * 4}
imageUrl={imageUrl} imageUrl={imageUrl}
/> />
{( <VLayout
[ layoutConfig={layoutConfig().mostWidth().fitHeight()}
[ padding={{ left: 10, right: 10, top: 10, bottom: 10 }}
"黑白化", >
async () => { <Label
backgroundColor={Color.RED}
layoutConfig={layoutConfig().just()}
onClick={async () => {
iv.current.imageUrl = undefined;
iv.current.imageUrl = imageUrl;
}}
>
重置
</Label>
</VLayout>
<VLayout
layoutConfig={layoutConfig().mostWidth().fitHeight()}
padding={{ left: 10, right: 10, top: 10, bottom: 10 }}
backgroundColor={colors[3].alpha(0.1)}
space={5}
>
<Text textSize={20}>简单</Text>
<HLayout space={10}>
<Label
layoutConfig={layoutConfig().just()}
onClick={async () => {
const imageInfo = await iv.current.getImageInfo(context); const imageInfo = await iv.current.getImageInfo(context);
const pixels = await iv.current.getImagePixels(context); const pixels = await iv.current.getImagePixels(context);
const data = new Uint32Array(pixels); const data = new Uint32Array(pixels);
@ -66,70 +100,13 @@ export class ImageProcessorDemo extends Panel {
height: imageInfo.height, height: imageInfo.height,
pixels: pixels, pixels: pixels,
}; };
}, }}
], >
[ 黑白
"二值化", </Label>
async () => { <Label
const imageInfo = await iv.current.getImageInfo(context); layoutConfig={layoutConfig().just()}
const pixels = await iv.current.getImagePixels(context); onClick={async () => {
const data = new Uint32Array(pixels);
extractGrayValue(data);
binarization(data, 127);
iv.current.imagePixels = {
width: imageInfo.width,
height: imageInfo.height,
pixels: pixels,
};
},
],
[
"OSTU",
async () => {
const imageInfo = await iv.current.getImageInfo(context);
const pixels = await iv.current.getImagePixels(context);
const data = new Uint32Array(pixels);
extractGrayValue(data);
const t = ostu(data);
binarization(data, t);
iv.current.imagePixels = {
width: imageInfo.width,
height: imageInfo.height,
pixels: pixels,
};
},
],
[
"FastBlur",
async () => {
const imageInfo = await iv.current.getImageInfo(context);
const pixels = await iv.current.getImagePixels(context);
const data = new Uint32Array(pixels);
fastBlur(data, imageInfo.width, imageInfo.height, 30);
iv.current.imagePixels = {
width: imageInfo.width,
height: imageInfo.height,
pixels: pixels,
};
},
],
[
"高斯模糊",
async () => {
const imageInfo = await iv.current.getImageInfo(context);
const pixels = await iv.current.getImagePixels(context);
const data = new Uint32Array(pixels);
gaussianBlur(data, imageInfo.width, imageInfo.height, 1);
iv.current.imagePixels = {
width: imageInfo.width,
height: imageInfo.height,
pixels: pixels,
};
},
],
[
"透明",
async () => {
const imageInfo = await iv.current.getImageInfo(context); const imageInfo = await iv.current.getImageInfo(context);
loge(imageInfo); loge(imageInfo);
const pixels = await iv.current.getImagePixels(context); const pixels = await iv.current.getImagePixels(context);
@ -143,29 +120,99 @@ export class ImageProcessorDemo extends Panel {
height: imageInfo.height, height: imageInfo.height,
pixels: pixels, pixels: pixels,
}; };
}, }}
], >
[ 透明
"重置", </Label>
async () => { </HLayout>
iv.current.imageUrl = undefined; </VLayout>
iv.current.imageUrl = imageUrl; <VLayout
}, layoutConfig={layoutConfig().mostWidth().fitHeight()}
], padding={{ left: 10, right: 10, top: 10, bottom: 10 }}
] as [string, () => {}][] backgroundColor={colors[2].alpha(0.1)}
).map((e) => ( space={5}
<Text >
layoutConfig={layoutConfig().just()} <Text textSize={20}>模糊</Text>
width={100} <HLayout space={10}>
height={40} <Label
backgroundColor={colors[1]} layoutConfig={layoutConfig().just()}
textColor={Color.WHITE} onClick={async () => {
textSize={20} const imageInfo = await iv.current.getImageInfo(context);
onClick={e[1]} const pixels = await iv.current.getImagePixels(context);
> const data = new Uint32Array(pixels);
{e[0]} fastBlur(data, imageInfo.width, imageInfo.height, 30);
</Text> iv.current.imagePixels = {
))} width: imageInfo.width,
height: imageInfo.height,
pixels: pixels,
};
}}
>
FastBlur
</Label>
<Label
layoutConfig={layoutConfig().just()}
onClick={async () => {
const imageInfo = await iv.current.getImageInfo(context);
const pixels = await iv.current.getImagePixels(context);
const data = new Uint32Array(pixels);
gaussianBlur(data, imageInfo.width, imageInfo.height, 1);
iv.current.imagePixels = {
width: imageInfo.width,
height: imageInfo.height,
pixels: pixels,
};
}}
>
高斯模糊
</Label>
</HLayout>
</VLayout>
<VLayout
layoutConfig={layoutConfig().mostWidth().fitHeight()}
padding={{ left: 10, right: 10, top: 10, bottom: 10 }}
backgroundColor={colors[3].alpha(0.1)}
space={5}
>
<Text textSize={20}>二值化</Text>
<HLayout space={10}>
<Label
layoutConfig={layoutConfig().just()}
onClick={async () => {
const imageInfo = await iv.current.getImageInfo(context);
const pixels = await iv.current.getImagePixels(context);
const data = new Uint32Array(pixels);
extractGrayValue(data);
binarization(data, 127);
iv.current.imagePixels = {
width: imageInfo.width,
height: imageInfo.height,
pixels: pixels,
};
}}
>
普通
</Label>
<Label
layoutConfig={layoutConfig().just()}
onClick={async () => {
const imageInfo = await iv.current.getImageInfo(context);
const pixels = await iv.current.getImagePixels(context);
const data = new Uint32Array(pixels);
extractGrayValue(data);
const t = ostu(data);
binarization(data, t);
iv.current.imagePixels = {
width: imageInfo.width,
height: imageInfo.height,
pixels: pixels,
};
}}
>
OSTU
</Label>
</HLayout>
</VLayout>
</VLayout> </VLayout>
</Scroller>; </Scroller>;
} }