You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/03/22 02:34:52 UTC
[royale-asjs] branch develop updated: BE0014: add UIGraphicShape to
fill the bottle
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 808d5c2 BE0014: add UIGraphicShape to fill the bottle
808d5c2 is described below
commit 808d5c267ed99faf4ba9106c39e3ea29e330c222
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Mar 22 03:34:46 2020 +0100
BE0014: add UIGraphicShape to fill the bottle
---
.../src/main/resources/bottle.afdesign | Bin 5704413 -> 64309 bytes
.../main/royale/BE0014_Working_with_Graphics.mxml | 68 ++++++++++++++-------
2 files changed, 45 insertions(+), 23 deletions(-)
diff --git a/examples/blog/BE0014_Working_with_Graphics/src/main/resources/bottle.afdesign b/examples/blog/BE0014_Working_with_Graphics/src/main/resources/bottle.afdesign
index 694129c..bf1b5ab 100644
Binary files a/examples/blog/BE0014_Working_with_Graphics/src/main/resources/bottle.afdesign and b/examples/blog/BE0014_Working_with_Graphics/src/main/resources/bottle.afdesign differ
diff --git a/examples/blog/BE0014_Working_with_Graphics/src/main/royale/BE0014_Working_with_Graphics.mxml b/examples/blog/BE0014_Working_with_Graphics/src/main/royale/BE0014_Working_with_Graphics.mxml
index ebb46d5..e398068 100644
--- a/examples/blog/BE0014_Working_with_Graphics/src/main/royale/BE0014_Working_with_Graphics.mxml
+++ b/examples/blog/BE0014_Working_with_Graphics/src/main/royale/BE0014_Working_with_Graphics.mxml
@@ -21,17 +21,47 @@
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
- xmlns:svg="library://ns.apache.org/royale/svg">
-
+ xmlns:svg="library://ns.apache.org/royale/svg"
+ xmlns:graphics="org.apache.royale.graphics.*">
<fx:Script>
<![CDATA[
+ import org.apache.royale.display.Graphics;
+ import org.apache.royale.utils.transformValueFromRange;
+
+ /**
+ * The color of the liquid
+ */
+ private var liquidColor:Number = 0x15CF12;
+
+ /**
+ * Fill the bottle
+ */
private function changeFill(event:ValueChangeEvent):void {
- if(slider.value <= 400)
- {
- bgShape.height = slider.value;
- bgShape.y = fgShape.height - slider.value;
- }
+ var g:Graphics = Graphics.getInstanceFor(bgShape);
+ var newHeight:Number = transformValueFromRange(slider.value, slider.minimum, slider.maximum, 0, 350);
+ var newY:Number = fgShape.height - newHeight;
+
+ g.clear();
+ drawLiquid(g, liquidColor, .5, 0, newY, 400, 500, -15);
+ drawLiquid(g, liquidColor, 1, 0, newY, 400, 500, 30);
}
+
+ /**
+ * Draw the liquid to fill the bottle
+ */
+ private function drawLiquid(g:Graphics, color:Number, alpha:Number, x:int, y:int, width:int, height:int, wave:int):void {
+ if(y > height)
+ y = height;
+ g.beginFill(color, alpha);
+ g.moveTo(x, height);
+ g.lineTo(x, y);
+ g.curveTo(width / 4, y - wave, width / 2, y);
+ g.lineTo(width / 2, y)
+ g.curveTo(width * 3 / 4, y + wave, width, y);
+ g.lineTo(width, height);
+ g.lineTo(x, height);
+ g.endFill();
+ }
]]>
</fx:Script>
@@ -51,18 +81,19 @@
<html:H3 text="Working with Graphics" className="primary-normal"/>
</j:CardHeader>
<j:CardPrimaryContent itemsHorizontalAlign="itemsCentered">
- <j:Group width="400" height="500">
- <j:Group localId="bgShape" width="400" height="0" className="bgshape"/>
+ <j:Container localId="fgShape" width="400" height="500">
+
+ <!-- liquid -->
+ <js:UIGraphicsBase localId="bgShape" width="400" height="500"/>
+
<!-- fill mask -->
- <svg:Image localId="fgShape" src="assets/bottle-mask.svg" width="400" height="500"/>
-
+ <svg:Image src="assets/bottle-mask.svg" width="400" height="500"/>
<!-- inner shade -->
<svg:Image src="assets/bottle-shade.svg" width="400" height="500"/>
-
<!-- main shape -->
<svg:Image src="assets/bottle-main.svg" width="400" height="500"/>
- </j:Group>
-
+
+ </j:Container>
</j:CardPrimaryContent>
<j:CardActions itemsHorizontalAlign="itemsRight" itemsVerticalAlign="itemsCentered">
<j:Label text="Slide to fill"/>
@@ -72,13 +103,4 @@
</j:View>
</j:initialView>
- <fx:Style>
- @namespace "http://www.w3.org/1999/xhtml";
-
- .bgshape
- {
- background: #15CF12;
- }
- </fx:Style>
-
</j:Application>
\ No newline at end of file