|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0053)http://kidsdrawing.azurewebsites.net/kidsdrawing.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><META content="IE=10.000"
http-equiv="X-UA-Compatible">
<TITLE>Kids Drawing</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<STYLE type="text/css">
.shape {
fill: #808080;
}
.sprite {
stroke-width:3;
stroke:#b6ff00;
}
#body {
width:100%;
height:100%;
}
</STYLE>
<SCRIPT src="Kids%20Drawing_files/knockout-2.1.0.js" type="text/javascript"></SCRIPT>
<META name="GENERATOR" content="MSHTML 10.00.9200.16393"></HEAD>
<BODY>
<DIV id="canvas"><svg xmlns="http://www.w3.org/2000/svg"
id="svgRoot"><defs><filter id="f1" x="0" y="0" width="200%"
height="200%"><feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter> <rect id="square" filter="url("#f1")"
width="100" height="50" /> <rect class="sprite" id="bigrect"
filter="url("#f1")" width="300" height="300"><animate to="1"
from="0.1" dur="5s" begin="bigrect.mousedown" attributeType="XML"
attributeName="opacity" /> </rect> <circle
class="sprite" id="bigcircle" filter="url("#f1")" r="150"><animate
to="1" from="0.1" dur="5s" begin="bigcircle.mousedown" attributeType="XML"
attributeName="opacity" /> </circle> <polygon
class="sprite" id="bigtriangle" filter="url("#f1")" points="150,0 300,250 0,250"><animate
to="1" from="0.1" dur="5s" begin="bigtriangle.mousedown" attributeType="XML"
attributeName="opacity" /> </polygon> <circle
id="circle" filter="url("#f1")" r="25" /> <polygon
id="triangle" filter="url("#f1")" points="50,0 100,50 0,50" />
<rect id="drawingbox" fill="azure" stroke="lightgray" transform="translate(120 100)"
width="500" height="500" /> <g id="heading" transform="translate(20 64)"><text
style="font-family: Arial; font-size: 64px; fill: lightgray;">Kids
Drawing</text> <path stroke="lightblue" stroke-width="4" d="M 0 5 L 800 5"
/> </g> </defs> <use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#heading" /> <use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#drawingbox" /> <g transform="translate(0 40)"><!-- ko foreach:palletes -->
<g transform="translate(50 100)"><use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#circle" data-bind="style:{fill:fill},attr:{y:y},event:{mousedown:$root.changeColor.bind($data,fill)}"
/> </g> <!-- /ko --> <!-- ko foreach:shapes -->
<g transform="translate(650 180)"><!-- ko if: $root.isRect(shape) -->
<use class="shape" transform="translate(0)" xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#square" data-bind="attr:{id:shape},event:{mousedown:$root.changeShape.bind($data,shape)}"
/> <!-- /ko --> <!-- ko if: $root.isTriangle(shape) -->
<use class="shape" transform="translate(0 100)"
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#triangle" data-bind="attr:{id:shape},event:{mousedown:$root.changeShape.bind($data,shape)}"
/> <!-- /ko --> <!-- ko if: $root.isCircle(shape) -->
<use class="shape" transform="translate(50 250)"
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#circle" data-bind="attr:{id:shape},event:{mousedown:$root.changeShape.bind($data,shape)}"
/> <!-- /ko --> </g> <!-- /ko -->
<g transform="translate(220 150)"><!-- ko if: selectedShape() == 'Square' -->
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bigrect"
data-bind="style:{fill:selectedFill}" /> <!-- /ko -->
<!-- ko if: selectedShape() == 'Triangle' -->
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bigtriangle"
data-bind="style:{fill:selectedFill}" /> <!-- /ko -->
<!-- ko if: selectedShape() == 'Circle' -->
<use transform="translate(150 150)" xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#bigcircle" data-bind="style:{fill:selectedFill}" />
<!-- /ko --> </g> <text style="font-family: Arial; font-size: 34px; fill: #0094ff;"
transform="translate(130 100)" data-bind="text:selectedShape" />
<text style="font-family: Arial; font-size: 34px; fill: #0094ff;" transform="translate(130 540)"
data-bind="text:selectedFill" />> </g> </svg> </DIV>
<SCRIPT type="text/javascript">
var ViewModel = function () {
var self = this;
this.palletes = ko.observableArray([
{ fill: "lightblue", y: 0 },
{ fill: "orange", y: 80 },
{ fill: "purple", y: 160 },
{ fill: "gray", y: 240 },
{ fill: "lightgreen", y: 320 },
{ fill: "red", y: 400 }
]);
this.shapes = ko.observableArray([
{ shape: "Triangle", x: 0 },
{ shape: "Square", x: 100 },
{ shape: "Circle", x: 200 }
]);
this.selectedFill = ko.observable("lightblue");
this.selectedShape = ko.observable("Square");
this.height = ko.observable(60);
this.isRect = function (shape) {
return (shape == "Square");
}
this.isTriangle = function (shape) {
return (shape == "Triangle");
}
this.isCircle = function (shape) {
return (shape == "Circle");
}
this.changeColor = function (fill) {
self.selectedFill(fill);
}
this.changeShape = function (shape) {
self.selectedShape(shape);
}
this.getPos = ko.computed(function (index) {
return index * self.height();
}, this);
}
ko.applyBindings(new ViewModel());
</SCRIPT>
</BODY></HTML>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Henry Tan was born in a small town, Sukabumi, Indonesia, on December 7th, 1979. He obtained his Bachelor of Computer System Engineering with first class honour from La Trobe University, VIC, Australia in 2003. During his undergraduate study, he was nominated as the most outstanding Honours Student in Computer Science. Additionally, he was the holder of 2003 ACS Student Award. After he finished his Honour year at La Trobe University, on August 2003, he continued his study pursuing his doctorate degree at UTS under supervision Prof. Tharam S. Dillon. He obtained his PhD on March 2008. His research interests include Data Mining, Computer Graphics, Game Programming, Neural Network, AI, and Software Development. On January 2006 he took the job offer from Microsoft Redmond, USA as a Software Design Engineer (SDE).
What he like most? Programming!Math!Physisc!Computer Graphics!Playing Game!
What programming language?
C/C++ but started to love C#.
Submit an article or tip