var dotColors="";function dropDots(sender, mouseEventArgs){if (dotColors != ""){dotColors += ",";}dotColors += getFillColor(sender.Fill.Color);createDisplayCanvas();} 注意这里使用了新的全局变量"dotColors"。 在createDisplayCanvas()函数中,用: source: "drawDots.php?colors=" + dotColors, 替换掉: source: "drawDots.php", 至此,createSilverlight.js的内容如下: 清单5:修改好的createSilverlight.js function createControlPanel(){Silverlight.createObjectEx({source: "controlPanel.xaml",parentElement: document.getElementById("dotControlPanel"),id: "slControlPanel",properties: {width: "100%",height: "100%",inplaceInstallPrompt:true,version: "1.0"}});}if (!window.Silverlight) window.Silverlight = {};Silverlight.createDelegate = function(instance, method) {return function() {return method.apply(instance, arguments);}}var dotColors="";function dropDots(sender, mouseEventArgs){if (dotColors != ""){dotColors += ",";}dotColors += getFillColor(sender.Fill.Color);createDisplayCanvas();}function createDisplayCanvas(){ Silverlight.createObjectEx({source: "drawDots.php?colors=" + dotColors,parentElement: document.getElementById("dotDisplayCanvas"),id: "slDisplayCanvas",properties: {width: "100%",height: "100%",inplaceInstallPrompt:true,version: "1.0"}});}function getFillColor(color){var fill = color;if (fill < 0) {fill = (16777216 + parseInt(fill));}fill = fill.toString(16);if (fill.length > 6) {fill = fill.substr(fill.length - 6);}while (fill.length < 6) {fill = "0" + fill;}fill = "ff" + fill;return fill;} 用清单6中的代码完全替换掉drawDots.php。 清单6:修改后的drawDots.php <?header('Content-type: text/xml');?><?$arrColors = explode(",",$_GET["colors"]);srand(time());?><Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="resultCanvas"><Canvas x:Name="Layer_1" Width="640" Height="80" Canvas.Left="0" Canvas.Top="0"><?$n = 0;foreach ($arrColors as $c) {$n++;$lft = (rand()%530);$top = (rand()%370);echo('<Ellipse x:Name="Ellipse_' . $n . '" Width="100" Height="100" Canvas.Left="' . $lft . '" Canvas.Top="' . $top . '" Stretch="Fill" Fill="#' . $c . '"/>');}?></Canvas></Canvas> 正如你所看到的,XAML中的鼠标事件触发了一个包括一个全局变量的JavaScript程序,它填充选中的小圆圈的颜色,然后调用createDisplayCanvas()重新绘制画布,通过GET将这个字符串传递给PHP。
新的PHP脚本将GET字符串转换成数组,然后通过每一个形成一个环,另外,我还在Ellipse XAML echo内为Canvas.Left和Canvas.Top设置了随机数以增加公式的随机性,这对于其他的东西没有任何实用的价值,只不过是想刺激一下想象力,产生更多的创造力和激发人们对这个技术的热情。
最终结果可以下载zip压缩包。 | | |