This repository has been archived on 2024-07-22. You can view files and clone it, but cannot push or open issues or pull requests.
Doric/doric-demo/src/ResourceDemo.tsx
2022-01-26 15:38:49 +08:00

81 lines
1.9 KiB
TypeScript

import {
Base64Resource,
DrawableResource,
Group,
Panel,
jsx,
Color,
layoutConfig,
Image,
RemoteResource,
MainBundleResource,
Scroller,
VLayout,
Text,
Gravity,
createRef,
loge,
} from "doric";
import { colors, label } from "./utils";
import { img_base64 } from "./image_base64";
@Entry
export class ResourceDemo extends Panel {
build(root: Group): void {
const iv = createRef<Image>();
async function click() {
const imageInfo = await iv.current.getImageInfo(context);
loge(imageInfo);
const pixels = await iv.current.getImagePixels(context);
loge(pixels.byteLength);
const data = new Uint8Array(pixels);
for (let i = 0; i < data.length - 4; i += 4) {
data[i + 3] = 0xff / 5;
}
iv.current.imagePixels = {
width: imageInfo.width,
height: imageInfo.height,
pixels: pixels,
};
}
<Scroller parent={root} layoutConfig={layoutConfig().most()}>
<VLayout
layoutConfig={layoutConfig().mostWidth().fitHeight()}
space={10}
gravity={Gravity.Center}
>
<Text
layoutConfig={layoutConfig().mostWidth().justHeight()}
textSize={30}
textColor={Color.WHITE}
backgroundColor={colors[5]}
textAlignment={Gravity.Center}
height={50}
>
Resource Demo
</Text>
{label("Button")}
<Image
image={
Environment.platform === "Android"
? new DrawableResource("doric_icon_back")
: new MainBundleResource("Hanabi.ttf")
}
/>
<Image
ref={iv}
image={
new RemoteResource("https://p.upyun.com/demo/webp/webp/jpg-0.webp")
}
/>
<Image
image={new Base64Resource(img_base64[0])}
onClick={async () => {
await click();
}}
/>
</VLayout>
</Scroller>;
}
}