效果很炫的投影(純CSS+JS)

文章目錄

• OpenLaszlo DHTML CSS 3 demo – to Flash or not to Flash, is no question!

OpenLaszlo DHTML CSS 3 demo – to Flash or not to Flash, is no question!

by Raju Bitter on August 25, 2009

Since the OpenLaszlo DHTML runtime has been released, I’ve been wondering if there’ll ever be the time for me to say: “I can imagine that Flash won’t be a necessity for visually very appealing RIAs!” That time has come, thanks to the incredible work on great open source projects like the Firefox browser or Webkit.

Judge for yourself, here are two versions (DHTML/JavaScript and SWF9) of a demo application, that was inspired by Zachary Johnson’s great CSS3 text-shadow demo. This is the OpenLaszlo DHTML/JavaScript version of the demo, and as always with the advanced CSS features, you need a modern browser for it to work (I’ve successfully tested with Firefox 3.5+, Safari 4.x or Webkit Nighly Build, Google Chrome and Opera 10):

Please upgrade your browser

And in case you wonder, what the SWF9 version of this application looks like, here it is. Even after so many years of working with OpenLaszlo it’s still surprising to see how well the platform renders applications across runtimes.

I believe this demo underlines what I’ve said in my previous blog, that OpenLaszlo can be one of the key technologys to drive adoption of standards like HTML 5 and CSS3 extensions in the RIA space, providing a backup version of an application in Flash for Internet Explorer 6/7 and older browsers. And who would choose Flash, if you can get exact the same visual results with open standards!

Update: Some people have requested the source code for this example. This is the main LZX file, and here is a link to the ZIP file containing the graphic resources as well. I ran tested with OpenLaszlo 4.5.1 and Trunk.

view plaincopy to clipboardprint?

2. <?xml version="1.0" encoding="utf-8"?>   
3. <!-- * GPL_COPYRIGHT_BEGIN ***********************************************   
4. * Copyright 2009 Raju Bitter   
5. * Use is subject to license terms.   
6. * This program is free software: you can redistribute it and/or modify   
7. * it under the terms of the GNU General Public License as published by   
8. * the Free Software Foundation, either version 3 of the License, or   
9. * any later version.   
10. *   
11. * This program is distributed in the hope that it will be useful,   
12. * but WITHOUT ANY WARRANTY; without even the implied warranty of   
13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the   
14. * GNU General Public License for more details.   
15. *   
16. * You should have received a copy of the GNU General Public License   
17. * along with this program.  If not, see <http://www.gnu.org/licenses/>.
18. * GPL_COPYRIGHT__END ****************************************************** -->   
19. <canvas width="600" height="400" bgcolor="#FFFFFF" proxied="true">   
21.   <!-- Resources -->   
22.   <resource name="spotlightRes" src="spotlight.png" />   
23.   <resource name="openlaszloRes" src="OpenLaszlo-Header.png" />   
25.   <!-- reposition boxes depending on mouse x-pos -->   
26.   <handler name="onmousemove" reference="lz.GlobalMouse"><![CDATA[   
27. var posX = canvas.getMouse('x');   
28. var posY = canvas.getMouse('y');   
29. if (posX>0 &amp;amp;&amp;amp; posY>0 &amp;amp;&amp;amp; posX<canvas.width &amp;amp;&amp;amp; posY<canvas.height) {   
30.       spotlight.setAttribute("x", (posX-spotlight.width/2));   
31.       spotlight.setAttribute("y", (posY-spotlight.height/2));   
32. // Calculate angel and distance
33. var xx = posX - canvas.width/2;   
34. var yy = (posY - canvas.height/2);   
35. var distance = Math.sqrt(Math.pow(xx, 2) + Math.pow(yy, 2));   
36. var angle = Math.atan(yy/xx)/(Math.PI/180);   
37. if (xx<0){   
38.         angle+=180   
39.       }   
40. if(xx>=0 &amp;amp;&amp;amp; yy<0) {   
41.         angle+=360   
42.       }   
43.       theText.setAttribute("distance", distance/2);   
44.       theText.setAttribute("angle", angle+180);   
45.     }   
46.   ]]>   
47.   </handler>   
49.   <class name="demotext" extends="text">   
50.       <!-- AS3 import statements -->   
51.       <switch>   
52.         <when property="$as3">   
53.           <passthrough>   
54. import flash.filters.DropShadowFilter;   
55.           </passthrough>   
56.         </when>   
57.       </switch>   
59.       <!-- Shadow distance -->   
60.       <attribute name="distance" value="12" />   
61.       <!-- Shadow angle -->   
62.       <attribute name="angle" value="0" />   
63.       <!-- blur X  -->   
64.       <attribute name="blurx" value="5" />   
65.       <!-- blur Y -->   
66.       <attribute name="blury" value="5" />   
68.       <!-- xoffset for CSS DropBox -->   
69.       <attribute name="__xoffset" value="0" />   
70.       <!-- yoffset for CSS DropBox -->   
71.       <attribute name="__yoffset" value="0" />   
73.       <!-- Reference to the Flash DropShadowFilter object -->   
74.       <attribute name="shadowfilter" value="null" />   
76.       <handler name="oninit">   
77. this.addBoxShadow()   
78.       </handler>   
80.       <method name="addBoxShadow">   
81. if ($dhtml) {   
82. // lz.text clipping active, which would cut off the shadow in DHTML
83. // Workaround for http://jira.openlaszlo.org/jira/browse/LPP-8415
84. this.getMCRef().style.overflow = "visible";   
85. this.getMCRef().firstChild.style.overflow = "visible";   
86. this.getMCRef().firstChild.style.clip = "";   
87. this.cssCalculateOffset();   
88. var cssString = "#333 "+ __xoffset +"px "+ __yoffset+"px "+ blurx + "px";   
89.           Debug.write(cssString);   
90. this.getMCRef().style.textShadow = cssString;   
91.         } else {   
92. /* DropShadowFilter constructor values:
93.            *  [distance:Number]
94.            *  [angle:Number]
95.            *  [color:Number]
96.            *  [alpha:Number]
97.            *  [blurX:Number]
98.            *  [blurY:Number]
99.            *  [strength:Number]
100.            *  [quality:Number]
101.            *  [inner:Boolean]
102.            *  [knockout:Boolean]
103.            *  [hideObject:Boolean])
104.            */
105. this.shadowfilter = new flash.filters.DropShadowFilter(this.distance, this.angle,   
106.               0x333333, 0.95, this.blurx, this.blury, 1, 2, false, false, false);   
107. // Have to remove mask on sprite for SWF8 runtime
108. // Workaround for http://jira.openlaszlo.org/jira/browse/LPP-8426
109. if ($as2) {   
110. this.sprite.removeMask();   
111.           }   
112.           updateSWFFilter();   
113.         }   
114.       </method>   
116.       <handler name="onangle">   
117. if ($as2 || $as3) {   
118. this.shadowfilter.angle = this.angle;   
119. this.shadowfilter.distance = this.distance;   
120. this.shadowfilter.blurX = this.blurx;   
121. this.shadowfilter.blurY = this.blurx;   
122.           updateSWFFilter();   
123.         } else if ($dhtml) {   
124. this.cssCalculateOffset();   
125. var cssString = "#333 "+ __xoffset +"px "+ __yoffset+"px "+ blurx + "px";   
126. this.getMCRef().style.textShadow = cssString;   
127.         }   
128.       </handler>   
130.       <method name="updateSWFFilter">   
131. this.sprite.getMCRef().filters = [this.shadowfilter];   
132.       </method>   
134.       <method name="cssCalculateOffset">   
135. // CSS3 doesn't use angle, but x/y offset. So we need to
136. // translate from angle and distance to x and y offset for CSS3.
137. // Math.cos and Math.cos are based on radians, not degrees
138. var radians = this.angle * Math.PI/180;   
139. this.__xoffset = Math.round(Math.cos(radians) * this.distance);   
140. this.__yoffset = Math.round(Math.sin(radians) * this.distance);   
141.       </method>   
143.   </class>   
145.   <demotext align="center" y="${canvas.height/2-this.height}" id="theText" clip="false"
146.         fontsize="70" fontstyle="bold" fgcolor="#2c657a" opacity="1.0">OpenLaszlo</demotext>   
148.   <view id="wall" resource="openlaszloRes" y="${canvas.height-180}" />   
150.   <view id="spotlight" x="$once{canvas.width/2-this.width/2}" y="$once{canvas.height/2-this.height/2}" resource="spotlightRes" />   
151. </canvas> 

<?xml version="1.0" encoding="utf-8"?><!-- * GPL_COPYRIGHT_BEGIN *********************************************** * Copyright 2009 Raju Bitter * Use is subject to license terms. * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program.  If not, see <http://www.gnu.org/licenses/>. * GPL_COPYRIGHT__END ****************************************************** --><canvas width="600" height="400" bgcolor="#FFFFFF" proxied="true">  <!-- Resources -->  <resource name="spotlightRes" src="spotlight.png" />  <resource name="openlaszloRes" src="OpenLaszlo-Header.png" />  <!-- reposition boxes depending on mouse x-pos -->  <handler name="onmousemove" reference="lz.GlobalMouse"><![CDATA[    var posX = canvas.getMouse('x');    var posY = canvas.getMouse('y');    if (posX>0 &amp;amp;&amp;amp; posY>0 &amp;amp;&amp;amp; posX<canvas.width &amp;amp;&amp;amp; posY<canvas.height) {      spotlight.setAttribute("x", (posX-spotlight.width/2));      spotlight.setAttribute("y", (posY-spotlight.height/2));      // Calculate angel and distance      var xx = posX - canvas.width/2;      var yy = (posY - canvas.height/2);      var distance = Math.sqrt(Math.pow(xx, 2) + Math.pow(yy, 2));      var angle = Math.atan(yy/xx)/(Math.PI/180);      if (xx<0){        angle+=180      }      if(xx>=0 &amp;amp;&amp;amp; yy<0) {        angle+=360      }      theText.setAttribute("distance", distance/2);      theText.setAttribute("angle", angle+180);    }  ]]>  </handler>  <class name="demotext" extends="text">      <!-- AS3 import statements -->      <switch>        <when property="$as3">          <passthrough>                        import flash.filters.DropShadowFilter;          </passthrough>        </when>      </switch>      <!-- Shadow distance -->      <attribute name="distance" value="12" />      <!-- Shadow angle -->      <attribute name="angle" value="0" />      <!-- blur X  -->      <attribute name="blurx" value="5" />      <!-- blur Y -->      <attribute name="blury" value="5" />      <!-- xoffset for CSS DropBox -->      <attribute name="__xoffset" value="0" />      <!-- yoffset for CSS DropBox -->      <attribute name="__yoffset" value="0" />      <!-- Reference to the Flash DropShadowFilter object -->      <attribute name="shadowfilter" value="null" />      <handler name="oninit">        this.addBoxShadow()      </handler>      <method name="addBoxShadow">        if ($dhtml) {          // lz.text clipping active, which would cut off the shadow in DHTML          // Workaround for http://jira.openlaszlo.org/jira/browse/LPP-8415          this.getMCRef().style.overflow = "visible";          this.getMCRef().firstChild.style.overflow = "visible";          this.getMCRef().firstChild.style.clip = "";          this.cssCalculateOffset();          var cssString = "#333 "+ __xoffset +"px "+ __yoffset+"px "+ blurx + "px";          Debug.write(cssString);          this.getMCRef().style.textShadow = cssString;        } else {          /* DropShadowFilter constructor values:           *  [distance:Number]           *  [angle:Number]           *  [color:Number]           *  [alpha:Number]           *  [blurX:Number]           *  [blurY:Number]           *  [strength:Number]           *  [quality:Number]           *  [inner:Boolean]           *  [knockout:Boolean]           *  [hideObject:Boolean])           */          this.shadowfilter = new flash.filters.DropShadowFilter(this.distance, this.angle,              0x333333, 0.95, this.blurx, this.blury, 1, 2, false, false, false);          // Have to remove mask on sprite for SWF8 runtime          // Workaround for http://jira.openlaszlo.org/jira/browse/LPP-8426          if ($as2) {            this.sprite.removeMask();          }          updateSWFFilter();        }      </method>      <handler name="onangle">        if ($as2 || $as3) {          this.shadowfilter.angle = this.angle;          this.shadowfilter.distance = this.distance;          this.shadowfilter.blurX = this.blurx;          this.shadowfilter.blurY = this.blurx;          updateSWFFilter();        } else if ($dhtml) {          this.cssCalculateOffset();          var cssString = "#333 "+ __xoffset +"px "+ __yoffset+"px "+ blurx + "px";          this.getMCRef().style.textShadow = cssString;        }      </handler>      <method name="updateSWFFilter">          this.sprite.getMCRef().filters = [this.shadowfilter];      </method>      <method name="cssCalculateOffset">        // CSS3 doesn't use angle, but x/y offset. So we need to        // translate from angle and distance to x and y offset for CSS3.        // Math.cos and Math.cos are based on radians, not degrees        var radians = this.angle * Math.PI/180;        this.__xoffset = Math.round(Math.cos(radians) * this.distance);        this.__yoffset = Math.round(Math.sin(radians) * this.distance);      </method>  </class>  <demotext align="center" y="${canvas.height/2-this.height}" id="theText" clip="false"        fontsize="70" fontstyle="bold" fgcolor="#2c657a" opacity="1.0">OpenLaszlo</demotext>  <view id="wall" resource="openlaszloRes" y="${canvas.height-180}" />  <view id="spotlight" x="$once{canvas.width/2-this.width/2}" y="$once{canvas.height/2-this.height/2}" resource="spotlightRes" /></canvas>

And if you built some other cool demos with CSS3 or HTML5 support, please ping me!