Using some platforms available in internet is good, but sometimes it takes longer time to learn and too complex. So I decide to make myself in a simple way.
Here the example:
Display.hitTestPoint by pixel
Parameters: x and y position to test
Return true if color transparancy >= 1
Please try click an object
?
Look how simple to make application as the following html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>K HitTextPoint</title>
<script src="kunjs/k.js"></script>
<script src="kunjs/geom.js"></script>
<script src="kunjs/events.js"></script>
<script src="kunjs/display.js"></script>
</head>
<body>
Display.hitTestPoint by pixel
<br />
Parameters: x and y position to test
<br />
Return true if color transparancy >= 1
<hr />
<canvas id="maincanvas" width="400" height="400"></canvas>
<hr />
<div id="otherdiv">?</div>
<script>
/**
*
* @author mi_kuncoro@yahoo.co.id
* include k.js
*/
(function(){
// Get the main canvas in html
var canvas = document.getElementById("maincanvas");
// assign it to the engine
K.setCanvas(canvas);
// You also can scale the canvas:
//K.canvas.style.width = 600 + "px";
//K.canvas.style.height = 600 + "px";
// Set the background color:
K.stage.backgroundColor = "#000000";
// Create some display-objects
var d = new K.Display(5, 5, 2);
d.x = 200;
d.y = 200;
// You have to carefully define the size to make your drawing fit,
// thought you can change it later by setSize()
d.width = 100;
d.height = 30;
// If you want to centerize or offset it:
d.canvasX = -50;
d.canvasY = -15;
// Now draw something:
var c = d.getContext();
c.fillStyle = "#3333ff";
c.fillRect(0, 0, 50, 30);
c.fillStyle = "#ff0000";
c.fillRect(50, 0, 50, 30);
var d2 = new K.Display(5, 5, 2);
d2.x = 100;
d2.y = 0;
d2.width = 50;
d2.height = 50;
d2.canvasX = -25;
d2.canvasY = -25;
c = d2.getContext();
c.strokeStyle = "#cccccc";
c.fillStyle = "#eeff00";
c.fillRect(0, 0, d2.width, d2.height);
c.strokeRect(0, 0, d2.width, d2.height);
var d3 = new K.Display(5, 5, 2);
d3.x = 150;
d3.y = 150;
d3.width = 100;
d3.height = 100;
d3.canvasX = 0;
d3.canvasY = 0;
c = d3.getContext();
c.strokeStyle = "#00ff00";
c.fillStyle = "#55ff66";
c.beginPath();
c.arc(50, 50, 40, Math.PI, false);
c.stroke();
c.fill();
// The click event will check mouse position based on it's pixel (not rectangle).
// Transparency below 1 will be ignored
var od = document.getElementById("otherdiv");
d.eventDispatcher.addEventListener( "click", function(e) { od.innerHTML = "Click d "; } );
d3.eventDispatcher.addEventListener("click", function(e) { od.innerHTML = "Click d3"; });
// Test hierarchie by adding a display object to another:
d.addChild(d2);
// Now add to stage the first level display-objects
K.stage.addChild(d);
K.stage.addChild(d3);
var s = 1; // scale value
var ds = 0.1; // delta scale
var step = function (e)
{
// add rotation:
d.rotation += K.P1;
d2.rotation -= K.P1 * 5;
d3.rotation += K.P1 * 2;
// scaling:
s += ds;
if (s < 0.6 || s > 1.5) {
ds *= -1;
s += ds;
}
d2.scaleX = d2.scaleY = s;
// draw everything just by painting the stage:
K.stage.paint();
};
K.stage.eventDispatcher.addEventListener("enterFrame", step);
// Events, including ENTER_FRAME, are fully controlled,
// so we have to activate device event monitor as necessary:
K.eventManager.activate("enterFrame");
K.eventManager.activate("mouse");
}());
</script>
</body>
</html>
Look how simple to make application as the following html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>K HitTextPoint</title>
<script src="kunjs/k.js"></script>
<script src="kunjs/geom.js"></script>
<script src="kunjs/events.js"></script>
<script src="kunjs/display.js"></script>
</head>
<body>
Display.hitTestPoint by pixel
<br />
Parameters: x and y position to test
<br />
Return true if color transparancy >= 1
<hr />
<canvas id="maincanvas" width="400" height="400"></canvas>
<hr />
<div id="otherdiv">?</div>
<script>
/**
*
* @author mi_kuncoro@yahoo.co.id
* include k.js
*/
(function(){
// Get the main canvas in html
var canvas = document.getElementById("maincanvas");
// assign it to the engine
K.setCanvas(canvas);
// You also can scale the canvas:
//K.canvas.style.width = 600 + "px";
//K.canvas.style.height = 600 + "px";
// Set the background color:
K.stage.backgroundColor = "#000000";
// Create some display-objects
var d = new K.Display(5, 5, 2);
d.x = 200;
d.y = 200;
// You have to carefully define the size to make your drawing fit,
// thought you can change it later by setSize()
d.width = 100;
d.height = 30;
// If you want to centerize or offset it:
d.canvasX = -50;
d.canvasY = -15;
// Now draw something:
var c = d.getContext();
c.fillStyle = "#3333ff";
c.fillRect(0, 0, 50, 30);
c.fillStyle = "#ff0000";
c.fillRect(50, 0, 50, 30);
var d2 = new K.Display(5, 5, 2);
d2.x = 100;
d2.y = 0;
d2.width = 50;
d2.height = 50;
d2.canvasX = -25;
d2.canvasY = -25;
c = d2.getContext();
c.strokeStyle = "#cccccc";
c.fillStyle = "#eeff00";
c.fillRect(0, 0, d2.width, d2.height);
c.strokeRect(0, 0, d2.width, d2.height);
var d3 = new K.Display(5, 5, 2);
d3.x = 150;
d3.y = 150;
d3.width = 100;
d3.height = 100;
d3.canvasX = 0;
d3.canvasY = 0;
c = d3.getContext();
c.strokeStyle = "#00ff00";
c.fillStyle = "#55ff66";
c.beginPath();
c.arc(50, 50, 40, Math.PI, false);
c.stroke();
c.fill();
// The click event will check mouse position based on it's pixel (not rectangle).
// Transparency below 1 will be ignored
var od = document.getElementById("otherdiv");
d.eventDispatcher.addEventListener( "click", function(e) { od.innerHTML = "Click d "; } );
d3.eventDispatcher.addEventListener("click", function(e) { od.innerHTML = "Click d3"; });
// Test hierarchie by adding a display object to another:
d.addChild(d2);
// Now add to stage the first level display-objects
K.stage.addChild(d);
K.stage.addChild(d3);
var s = 1; // scale value
var ds = 0.1; // delta scale
var step = function (e)
{
// add rotation:
d.rotation += K.P1;
d2.rotation -= K.P1 * 5;
d3.rotation += K.P1 * 2;
// scaling:
s += ds;
if (s < 0.6 || s > 1.5) {
ds *= -1;
s += ds;
}
d2.scaleX = d2.scaleY = s;
// draw everything just by painting the stage:
K.stage.paint();
};
K.stage.eventDispatcher.addEventListener("enterFrame", step);
// Events, including ENTER_FRAME, are fully controlled,
// so we have to activate device event monitor as necessary:
K.eventManager.activate("enterFrame");
K.eventManager.activate("mouse");
}());
</script>
</body>
</html>
Next post, I will open the engine/platform behind it.
Tidak ada komentar:
Posting Komentar