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

feat: update EffectDemo and fix some code problems

Browse Source
This commit is contained in:
pengfei.zhou 2021-11-26 13:48:29 +08:00 committed by osborn
parent 7c9e13158d
commit 91f154cd9b
5 changed files with 266 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
doric-android/doric/src/main/java/pub/doric/shader/AeroEffectView.java
View File

@ -62,6 +62,9 @@ public class AeroEffectView extends DoricLayer {
@Override
protected void dispatchDraw(Canvas canvas) {
if (canvas.getWidth() <= 0 || canvas.getHeight() <= 0) {
return;
}
if (mFullBitmap == null
|| mFullBitmap.getWidth() != canvas.getWidth()
|| mFullBitmap.getHeight() != canvas.getHeight()) {

2
doric-android/doric/src/main/java/pub/doric/shader/AeroEffectViewNode.java
View File

@ -46,7 +46,7 @@ public class AeroEffectViewNode extends StackNode {
if ("effectiveRect".equals(name)) {
if (prop.isObject()) {
int x = DoricUtils.dp2px(prop.asObject().getProperty("x").asNumber().toFloat());
int y = DoricUtils.dp2px(prop.asObject().getProperty("x").asNumber().toFloat());
int y = DoricUtils.dp2px(prop.asObject().getProperty("y").asNumber().toFloat());
int width = DoricUtils.dp2px(prop.asObject().getProperty("width").asNumber().toFloat());
int height = DoricUtils.dp2px(prop.asObject().getProperty("height").asNumber().toFloat());
((AeroEffectView) view).setEffectiveRect(new Rect(x, y, x + width, y + height));

3
doric-android/doric/src/main/java/pub/doric/shader/BlurEffectView.java
View File

@ -61,6 +61,9 @@ public class BlurEffectView extends DoricLayer {
@Override
protected void dispatchDraw(Canvas canvas) {
if (canvas.getWidth() <= 0 || canvas.getHeight() <= 0) {
return;
}
if (mFullBitmap == null
|| mFullBitmap.getWidth() != canvas.getWidth()
|| mFullBitmap.getHeight() != canvas.getHeight()) {

2
doric-android/doric/src/main/java/pub/doric/shader/BlurEffectViewNode.java
View File

@ -50,7 +50,7 @@ public class BlurEffectViewNode extends StackNode {
} else if ("effectiveRect".equals(name)) {
if (prop.isObject()) {
int x = DoricUtils.dp2px(prop.asObject().getProperty("x").asNumber().toFloat());
int y = DoricUtils.dp2px(prop.asObject().getProperty("x").asNumber().toFloat());
int y = DoricUtils.dp2px(prop.asObject().getProperty("y").asNumber().toFloat());
int width = DoricUtils.dp2px(prop.asObject().getProperty("width").asNumber().toFloat());
int height = DoricUtils.dp2px(prop.asObject().getProperty("height").asNumber().toFloat());
((BlurEffectView) view).setEffectiveRect(new Rect(x, y, x + width, y + height));

278
doric-demo/src/BlurEffectsDemo.tsx
View File

@ -8,32 +8,270 @@ import {
Image,
Text,
createRef,
animate,
loge,
Stack,
RotationXAnimation,
RotationAnimation,
Color,
GestureContainer,
Scroller,
Gravity,
HLayout,
} from "doric";
import { colors } from "./utils";
@Entry
export class BlurEffectsDemo extends Panel {
build(root: Group) {
let ref = createRef<Image>();
<VLayout layoutConfig={layoutConfig().most()} parent={root}>
<BlurEffect layoutConfig={layoutConfig().most()} radius={15}>
<Image
ref={ref}
imageUrl="https://pic3.zhimg.com/v2-5847d0813bd0deba333fcbe52435e83e_b.jpg"
onClick={async () => {
const rotation = new RotationAnimation();
rotation.fromRotation = 0;
rotation.toRotation = 2;
rotation.duration = 1000;
rotation.repeatCount = -1;
ref.current.doAnimation(context, rotation);
root.backgroundColor = Color.WHITE;
const blurEffectRef = createRef<BlurEffect>();
const gestureRef = createRef<GestureContainer>();
<Scroller parent={root} layoutConfig={layoutConfig().most()}>
<VLayout layoutConfig={layoutConfig().mostWidth().fitHeight()}>
<BlurEffect
layoutConfig={layoutConfig().mostWidth().fitHeight()}
radius={20}
ref={blurEffectRef}
effectiveRect={{
x: 50,
y: 50,
width: 200,
height: 200,
}}
/>
</BlurEffect>
</VLayout>;
>
<GestureContainer
ref={gestureRef}
layoutConfig={layoutConfig().mostWidth().fitHeight()}
>
<VLayout space={20} padding={{ left: 5, right: 5 }}>
<Image imageUrl="https://doric.pub/about/The_Parthenon_in_Athens.jpg" />
<HLayout space={10}>
<Image imageUrl="https://doric.pub/logo.png" />
<Text
layoutConfig={layoutConfig().mostWidth().fitHeight()}
maxLines={-1}
textAlignment={Gravity.Left}
>
希腊帕特农神庙历经数千年风雨侵蚀，早已断墙残垣。然而那些廊柱屹立千年，仍然坚固巍然。
这种廊柱样式叫做 Doric，即我们这个项目的名称由来。
正如Doric样式的廊柱撑起了神庙的千年风雨，我们也希望Doric项目能够作为前端页面的支柱，简洁，可靠。
目前Doric正在持续迭代中。如果您对Doric项目感兴趣，欢迎加入我们。
</Text>
</HLayout>
</VLayout>
</GestureContainer>
</BlurEffect>
<VLayout
layoutConfig={layoutConfig()
.mostWidth()
.fitHeight()
.configMargin({ top: 20 })}
space={5}
padding={{ left: 10, right: 10 }}
>
{(() => {
const labelRef = createRef<Text>();
const spinnerRef = createRef<Stack>();
const containerRef = createRef<GestureContainer>();
this.addOnRenderFinishedCallback(async () => {
const width = await containerRef.current.getWidth(this.context);
const maxValue = 25;
spinnerRef.current.width =
((blurEffectRef.current.radius || 0) * width) / maxValue;
labelRef.current.text = `Blur radius: ${blurEffectRef.current.radius}`;
containerRef.current.onTouchDown = async (event) => {
spinnerRef.current.width = event.x;
blurEffectRef.current.radius = Math.round(
(event.x / width) * maxValue
);
labelRef.current.text = `Blur radius: ${blurEffectRef.current.radius}`;
};
containerRef.current.onTouchMove = async (event) => {
spinnerRef.current.width = event.x;
blurEffectRef.current.radius = Math.round(
(event.x / width) * maxValue
);
labelRef.current.text = `Blur radius: ${blurEffectRef.current.radius}`;
};
});
return (
<>
<Text textSize={20} ref={labelRef}>
Blur radius:\t
</Text>
<GestureContainer
layoutConfig={layoutConfig().mostWidth().fitHeight()}
ref={containerRef}
border={{
width: 1,
color: colors[4],
}}
>
<Stack
ref={spinnerRef}
backgroundColor={colors[6]}
layoutConfig={layoutConfig().justWidth().justHeight()}
height={40}
></Stack>
</GestureContainer>
</>
);
})()}
</VLayout>
<VLayout
layoutConfig={layoutConfig()
.mostWidth()
.fitHeight()
.configMargin({ top: 20 })}
space={5}
padding={{ left: 10, right: 10 }}
>
{(() => {
const labelRef = createRef<Text>();
const spinnerRef = createRef<Stack>();
const containerRef = createRef<GestureContainer>();
this.addOnRenderFinishedCallback(async () => {
const width = await containerRef.current.getWidth(this.context);
const maxValue = await blurEffectRef.current.getWidth(
this.context
);
spinnerRef.current.width =
((blurEffectRef.current.effectiveRect?.width || 0) * width) /
maxValue;
labelRef.current.text = `Effective Width: ${blurEffectRef.current.effectiveRect?.width}`;
containerRef.current.onTouchDown = async (event) => {
spinnerRef.current.width = event.x;
blurEffectRef.current.effectiveRect = {
...blurEffectRef.current.effectiveRect!!,
width: Math.floor((event.x / width) * maxValue),
};
labelRef.current.text = `Effective Width: ${blurEffectRef.current.effectiveRect?.width}`;
};
containerRef.current.onTouchMove = async (event) => {
spinnerRef.current.width = event.x;
blurEffectRef.current.effectiveRect = {
...blurEffectRef.current.effectiveRect!!,
width: Math.floor((event.x / width) * maxValue),
};
labelRef.current.text = `Effective Width: ${blurEffectRef.current.effectiveRect?.width}`;
};
});
return (
<>
<Text textSize={20} ref={labelRef} />
<GestureContainer
layoutConfig={layoutConfig().mostWidth().fitHeight()}
ref={containerRef}
border={{
width: 1,
color: colors[4],
}}
>
<Stack
ref={spinnerRef}
backgroundColor={colors[6]}
layoutConfig={layoutConfig().justWidth().justHeight()}
height={40}
></Stack>
</GestureContainer>
</>
);
})()}
</VLayout>
<VLayout
layoutConfig={layoutConfig()
.mostWidth()
.fitHeight()
.configMargin({ top: 20 })}
space={5}
padding={{ left: 10, right: 10 }}
>
{(() => {
const labelRef = createRef<Text>();
const spinnerRef = createRef<Stack>();
const containerRef = createRef<GestureContainer>();
this.addOnRenderFinishedCallback(async () => {
const width = await containerRef.current.getWidth(this.context);
const maxValue = await blurEffectRef.current.getHeight(
this.context
);
spinnerRef.current.width =
((blurEffectRef.current.effectiveRect?.height || 0) * width) /
maxValue;
labelRef.current.text = `Effective Height: ${blurEffectRef.current.effectiveRect?.height}`;
containerRef.current.onTouchDown = async (event) => {
spinnerRef.current.width = event.x;
blurEffectRef.current.effectiveRect = {
...blurEffectRef.current.effectiveRect!!,
height: Math.floor((event.x / width) * maxValue),
};
labelRef.current.text = `Effective Height: ${blurEffectRef.current.effectiveRect?.height}`;
};
containerRef.current.onTouchMove = async (event) => {
spinnerRef.current.width = event.x;
blurEffectRef.current.effectiveRect = {
...blurEffectRef.current.effectiveRect!!,
height: Math.floor((event.x / width) * maxValue),
};
labelRef.current.text = `Effective Height: ${blurEffectRef.current.effectiveRect?.height}`;
};
});
return (
<>
<Text textSize={20} ref={labelRef} />
<GestureContainer
layoutConfig={layoutConfig().mostWidth().fitHeight()}
ref={containerRef}
border={{
width: 1,
color: colors[4],
}}
>
<Stack
ref={spinnerRef}
backgroundColor={colors[6]}
layoutConfig={layoutConfig().justWidth().justHeight()}
height={40}
></Stack>
</GestureContainer>
</>
);
})()}
</VLayout>
</VLayout>
</Scroller>;
this.addOnRenderFinishedCallback(() => {
let x = 0,
y = 0,
posX = 0,
posY = 0;
gestureRef.current.onTouchDown = (event) => {
const rect = blurEffectRef.current.effectiveRect || {
x: 0,
y: 0,
width: 0,
height: 0,
};
if (
event.x >= rect.x &&
event.x <= rect.x + rect.width &&
event.y >= rect.y &&
event.y <= rect.y + rect.height
) {
x = event.x;
y = event.y;
posX = rect.x;
posY = rect.y;
} else {
x = -1;
}
};
gestureRef.current.onTouchMove = (event) => {
if (x >= 0) {
blurEffectRef.current.effectiveRect = {
...blurEffectRef.current.effectiveRect!!,
x: posX + (event.x - x),
y: posY + (event.y - y),
};
}
};
});
}
}