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

feat:add Effects Demo

Browse Source
This commit is contained in:
pengfei.zhou 2019-11-20 11:18:44 +08:00
parent 7f22152f27
commit d31a5caffd
4 changed files with 388 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/index.ts
View File

@ -5,4 +5,5 @@ export default [
'src/ScrollerDemo',
'src/SliderDemo',
'src/LayoutDemo',
'src/EffectsDemo',
]

378
demo/src/EffectsDemo.ts Normal file
View File

@ -0,0 +1,378 @@
import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig } from "doric";
const colors = [
"#70a1ff",
"#7bed9f",
"#ff6b81",
"#a4b0be",
"#f0932b",
"#eb4d4b",
"#6ab04c",
"#e056fd",
"#686de0",
"#30336b",
].map(e => Color.parse(e))
function box(idx = 0) {
return (new Stack).also(it => {
it.width = it.height = 20
it.bgColor = colors[idx || 0]
})
}
function boxStr(str: string, idx = 0) {
return (new Text).also(it => {
it.width = it.height = 20
it.text = str
it.textColor = Color.parse('#ffffff')
it.bgColor = colors[idx || 0]
})
}
function label(str: string) {
return text({
text: str,
textSize: 16,
})
}
@Entry
class EffectsDemo extends Panel {
build(rootView: Group) {
scroller(
vlayout([
hlayout([
vlayout([
label("Origin view"),
box().apply({
width: 100,
height: 100
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Border"),
box().apply({
width: 100,
height: 100,
border: {
width: 5,
color: colors[3]
},
layoutConfig: layoutConfig().exactly().m({
left: 5,
right: 5,
bottom: 5,
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Corner"),
box().apply({
width: 100,
height: 100,
corners: 10,
layoutConfig: layoutConfig().exactly().m({
bottom: 10
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Shadow"),
box().apply({
width: 100,
height: 100,
shadow: {
opacity: 1,
color: colors[1],
offsetX: 3,
offsetY: 3,
radius: 5,
},
layoutConfig: layoutConfig().exactly().m({
bottom: 10
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
]).apply({ space: 20 } as IHLayout),
hlayout([
vlayout([
label("Border,Corner"),
box().apply({
width: 100,
height: 100,
border: {
width: 5,
color: colors[3]
},
corners: 10,
layoutConfig: layoutConfig().exactly().m({
left: 5,
right: 5,
bottom: 5,
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Border,Shadow"),
box().apply({
width: 100,
height: 100,
border: {
width: 5,
color: colors[3]
},
shadow: {
opacity: 1,
color: colors[1],
offsetX: 3,
offsetY: 3,
radius: 5,
},
layoutConfig: layoutConfig().exactly().m({
bottom: 10
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Corner,Shadow"),
box().apply({
width: 100,
height: 100,
corners: 10,
shadow: {
opacity: 1,
color: colors[1],
offsetX: 3,
offsetY: 3,
radius: 5,
},
layoutConfig: layoutConfig().exactly().m({
bottom: 10
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Border,Corner,Shadow"),
box().apply({
width: 100,
height: 100,
border: {
width: 5,
color: colors[3]
},
corners: 10,
shadow: {
opacity: 1,
color: colors[1],
offsetX: 3,
offsetY: 3,
radius: 5,
},
layoutConfig: layoutConfig().exactly().m({
left: 5,
right: 5,
bottom: 5,
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
]).apply({ space: 20 } as IHLayout),
hlayout([
vlayout([
label("Shadow"),
box().apply({
width: 100,
height: 100,
corners: 50,
shadow: {
opacity: 1,
color: colors[1],
offsetX: 0,
offsetY: 0,
radius: 10,
},
layoutConfig: layoutConfig().exactly().m({
left: 10,
right: 10,
bottom: 10,
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Shadow,offset"),
box().apply({
width: 100,
height: 100,
corners: 50,
shadow: {
opacity: 1,
color: colors[1],
offsetX: 5,
offsetY: 5,
radius: 5,
},
layoutConfig: layoutConfig().exactly().m({
left: 10,
right: 10,
bottom: 10,
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Shadow,opacity"),
box().apply({
width: 100,
height: 100,
corners: 50,
shadow: {
opacity: 0.5,
color: colors[1],
offsetX: 5,
offsetY: 5,
radius: 5,
},
layoutConfig: layoutConfig().exactly().m({
left: 10,
right: 10,
bottom: 10,
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Shadow,color"),
box().apply({
width: 100,
height: 100,
corners: 50,
shadow: {
opacity: 1,
color: colors[2],
offsetX: 5,
offsetY: 5,
radius: 5,
},
layoutConfig: layoutConfig().exactly().m({
left: 10,
right: 10,
bottom: 10,
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
]).apply({ space: 20 } as IHLayout),
hlayout([
vlayout([
label("Corner round"),
box().apply({
width: 100,
height: 100,
corners: 50,
layoutConfig: layoutConfig().exactly().m({
left: 5,
right: 5,
bottom: 5,
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Corner left top"),
box().apply({
width: 100,
height: 100,
corners: {
leftTop: 50,
},
layoutConfig: layoutConfig().exactly().m({
left: 5,
right: 5,
bottom: 5,
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Corner right top"),
box().apply({
width: 100,
height: 100,
corners: {
rightTop: 50,
},
layoutConfig: layoutConfig().exactly().m({
left: 5,
right: 5,
bottom: 5,
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Corner left bottom"),
box().apply({
width: 100,
height: 100,
corners: {
leftBottom: 50,
},
layoutConfig: layoutConfig().exactly().m({
left: 5,
right: 5,
bottom: 5,
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
vlayout([
label("Corner right bottom"),
box().apply({
width: 100,
height: 100,
corners: {
rightBottom: 50,
},
layoutConfig: layoutConfig().exactly().m({
left: 5,
right: 5,
bottom: 5,
})
}),]).apply({
gravity: gravity().center(),
space: 10,
} as IVLayout),
]).apply({ space: 20 } as IHLayout),
]).also(it => {
it.space = 20
}),
).also(it => {
it.layoutConfig = layoutConfig().wrap()
}).in(rootView)
}
}

1
demo/src/ListDemo.ts
View File

@ -44,6 +44,7 @@ class ListPanel extends Panel {
text({
textColor: Color.parse("#ffffff"),
textSize: 20,
text: "",
}).also(it => {
counter = it
it.layoutConfig = {

8
demo/src/Snake.ts
View File

@ -281,6 +281,14 @@ class SnakeView extends ViewHolder<SnakeModel> {
if (item === undefined) {
item = new Stack
item.width = item.height = 10
item.corners = 5
item.shadow = {
color: Color.GRAY,
opacity: 1,
radius: 3,
offsetX: 3,
offsetY: 3,
}
this.panel.addChild(item)
}
if (index === nodes.length - 1) {