Shapes

From FHTML

Jump to: navigation, search

Contents


By default, Fhtml draws boxes, like Html. However, other special shapes are available.

1 What's the same as html?

1.1 border-radius

<style type="text/fhtml">
#test {
    background:#F4F4F4;
    border:none;
    border-radius:20px 20px 50% 50%;
}
</style>
<div id="test"></div>
View Example View Source

The following border-radius properties are also supported:

  • border_top_left_radius
  • border_top_left_radius
  • border_top_right_radius
  • border_top_right_radius
  • border_bottom_left_radius
  • border_bottom_left_radius
  • border_bottom_right_radius
  • border_bottom_right_radius

2 What's extra?

2.1 ellipse

Draw an ellipse:

<style type="text/fhtml">
#test {
    w:200;
    h:400;
    shape:ellipse;
    background:#F4F4F4;
    border:none;
    border-radius:20px 20px 50% 50%;
    box-shadow:8px 8px 8 #666666;
   
}
</style>
<div id="test"></div>
View Example View Source

2.2 circle

While it's possible to draw a circle using border-radius properties, it's often more convenient to just draw a circle. The circle will remain a circle even if, for example, height is greater than width (as below).

width:200;
height:400;
background:#F4F4F4;
border:none;
border-radius:20px 20px 50% 50%;
box-shadow:8px 8px 8 #666666;
shape:circle;
View Example View Source

2.3 morphShape

  • Fhtml supports morphable shapes. These shapes allow you to draw any combination of curve or line, then easily animate points on those curves or lines.
  • This feature is intended to be simpler than SVG and ideal for instances when shapes need to be animated.


2.3.1 Syntax

  • Each point is described by an array of x/y objects.
  • The first array can only have one x/y object, as it describes the start point.
  • Subsequent arrays can have 1-3 x/y objects:
    • If 1, the array describes a single point.
    • If 2, the array describes a control point on a curve and an endpoint.
    • If 3, the array describes 2 control points on a curve and an endpoint.
  • Each x/y object can specify a coordinate rule in the following way:
    • Simple number: {x:20, y:20}
    • Percentage based: {x:"33%", y:"33%"}
    • Percentage based with offset: {x:"100%|-20", y:"100%|-20"}


2.3.2 Simple Example

  • Four simple points.
  • Lines will be drawn between the points.
  • When using percentage-based coordinates, you must use quotation marks. See below.
  • Using percentage based coordinates, especially with offsets, allows you to draw shapes that can be used no matter the size of the element that's using them. This contributes to reuse. Resize the example below to see.

<style type="xml/fhtmlassets" >
<shape type="morphShape" name="myShape"
points="[[{x:0, y:0}],
        [{x:'100%|-166', y:0}],
        [{x:'100%|-138', y:34}],
        [{x:'100%|-166', y:69}],
        [{x:0, y:69}]]"/>
</style>

<style type="text/css">
#test {
    background:#F4F4F4;
    border:none;
    box-shadow:8px 8px 8 #666666;
    shape:myShape;
}
</style>
<div id="test"></div>
View Example View Source

2.3.3 Complex Example

  • Four cubic bezier curves (two control points and an end point per array).
  • Curves will be drawn between the points.

This example creates curves with their endoints and control points at percentage-based values. Then, when you click on the div, several points are animated and the drawing updates.

<style type="xml/fhtmlassets" >
    <!--Define the points of the shape according to relative position-->
    <shape
       type="morphShape"
       name="myShape"
       points='[[{x:0, y:0}],
        [{x:"33%", y:"33%"}, {x:"66%", y:"33%"}, {x:"100%", y:0}],
        [{x:"66%", y:"33%"}, {x:"66%", y:"66%"}, {x:"100%", y:"100%"}],
        [{x:"66%", y:"66%"}, {x:"33%", y:"66%"}, {x:0, y:"100%"}],
        [{x:"33%", y:"66%"}, {x:"33%", y:"33%"}, {x:0, y:0}]]'
   />
    <bitmap name="eiffel" src="images/eiffel.jpg" />
    <background name="myBg" type="bitmap" bitmap="eiffel" repeat="no-repeat" />
    <border name="myBorder" background="myBg" />
    <animation name="myAnim" duration="2" easing="inOutBounce" >
        <frame>
            <!--Drill into shape.points object to animate x-->
            <action property="shape.points[1][2].x" end="25%" />
        </frame>
        <frame>
            <action property="shape.points[2][2].x" end="25%" />
        </frame>
        <frame easing="inOutSine">
            <!--Animate x of entire object-->
            <action property="x" end="2000" />
        </frame>
        <frame duration="1" >
            <!--Use JQuery-style '$' method for 'document.getElementById' -->
            <action script="$('myText').text='THANKS!!!'" />
        </frame>
    </animation>
</style>

<style type="text/css">
#test {
    w:100%;
    h:100%;
    background:myBg;
    /*Point to border and asset shapes*/
    border:myBorder;
    shape:myShape;
    margin-top:20px;
    box-shadow:10px 10px 20px #888888;
}
</style>
<script type="text/javascript" fhtmlignore="false" >
    setTimeout(
        function() {
            $('test').gotoAndPlay('myAnim', 0);
        }
        ,
        1000
    );
</script>
<div style="box-orient:none;" >
    <div id="test"></div>
</div>
View Example View Source

2.4 morphStroke

Fhtml supports morphable shapes. These shapes allow you to draw any combination of curve or line, then easily animate points on those curves or lines.

<style type="xml/fhtmlassets" >
    <shape
        type="morphStroke"
        name="myShape"
        points='[[{x:0, y:0}],
        [{x:"33%", y:"33%"}, {x:"66%", y:"33%"}, {x:"100%", y:0}],
        [{x:"66%", y:"33%"}, {x:"66%", y:"66%"}, {x:"100%", y:"100%"}],
        [{x:"66%", y:"66%"}, {x:"33%", y:"66%"}, {x:0, y:"100%"}],
        [{x:"33%", y:"66%"}, {x:"33%", y:"33%"}, {x:0, y:0}]]'
    />
    <bitmap name="metal" src="images/metal.jpg" />
    <background name="myBg" type="bitmap" bitmap="metal" repeat="repeat" />
    <border name="myBorder" background="myBg" thickness="20" />
    <animation name="myAnim" duration="2" easing="inOutBounce" >
        <frame>
            <action delay="1" property="shape.points[1][2].x" end="25%" />
        </frame>
        <frame>
            <action property="shape.points[2][2].x" end="25%" />
        </frame>
        <frame easing="inOutSine" >
            <action duration="1" delay=".5" property="x" end="2000" />
        </frame>
    </animation>
</style>

<script type="text/javascript" fhtmlignore="false" >
  document.getElementById('test').gotoAndPlay('myAnim', 0);
</script>

<style type="text/css">
#fhtml {
    box-orient:none;
}
#test {
    x:center;
    y:center;
    w:50%;
    h:50%;
    background:myBg;
    border:myBorder;
    shape:myShape;
    box-shadow:10px 10px 20px #333333;
}
</style>

<div style="box-orient:none" >
    <div id="test"></div>
</div>
View Example View Source

Retrieved from "http://www.fluidhtml.com/docs/index.php/Shapes"

Contents

General
Javascript
Elements
Effects
Animation
Pages
Personal tools