I am writing a user interface to determine accuracies of click on an object. Saw KineticJS and thought that would be a great tool to use.
I have created a simple stage with a circle in it. I am trying to draw a cross on the point someone clicks within the circle. I have found that the point that is drawn is offset to the bottom right of the cursor icon on screen. Also I am not sure why I cant seem to clear the area I draw some text to display the mouse co-ordinates. At the moment I get this weird overlaying of text on the same place.
Appreciate any input / suggestions.
Thanks.
index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="./assets/js/kineticjs/kinetic-v3.10.5.js"></script>
<script type="text/javascript" src="./assets/js/pointingRender/pointingrender.js"></script>
<script type="text/javascript">
$(document).ready(function(){
initRender();
});
</script>
<title>Pointing Devices User Interface</title>
</head>
<body>
<div id="container">
<div id="mouseposition"></div>
</div>
</body>
</html>
pointingrender.js:
function initRender() {
var stage = new Kinetic.Stage({
container:"container",
width:1920,
height:1080
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x:150,
y:stage.getHeight() / 2,
radius:70,
fill:"red",
stroke:"black",
strokeWidth:4
});
var oval = new Kinetic.Ellipse({
x:400,
y:stage.getHeight() / 2,
radius:{
x:100,
y:50
},
fill:"yellow",
stroke:"black",
strokeWidth:4,
draggable:true
});
oval.on("mouseover", function () {
document.body.style.cursor = "pointer";
});
oval.on("mouseout", function () {
document.body.style.cursor = "default";
});
circle.on("mousedown", function(evt){
var x = evt.clientX;
var y = evt.clientY;
var crossHorizontal = new Kinetic.Line({
points: [x-5, y, x+5, y],
stroke: "black",
strokeWidth: 1
});
var crossVertical = new Kinetic.Line({
points: [x, y-5, x, y+5],
stroke: "black",
strokeWidth: 1
});
var anotherlayer = new Kinetic.Layer();
anotherlayer.add(crossHorizontal);
anotherlayer.add(crossVertical);
stage.add(anotherlayer);
});
// add the shapes to the layer
layer.add(circle);
layer.add(oval);
// add the layer to the stage
stage.add(layer);
var canvas = layer.getCanvas();
var context = canvas.getContext('2d');
var theDiv = document.getElementById('container');
theDiv.addEventListener('mousemove', function (evt) {
var mousePos = getMousePos(theDiv, evt);
var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
writeMessage(canvas, message);
}, false);
}
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
// return relative mouse position
var mouseX = evt.clientX ;
var mouseY = evt.clientY ;
return {
x:mouseX,
y:mouseY
};
}
Add "var messagelayer = new Kinetic.Layer(); for display Message Layer and add "canvas.clear();" in writeMessage Function for clear message.
function initRender() {
var stage = new Kinetic.Stage({
container:"container",
width:500,
height:600
});
var layer = new Kinetic.Layer();
var messagelayer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x:150,
y:stage.getHeight() / 2,
radius:70,
fill:"red",
stroke:"black",
strokeWidth:4
});
var oval = new Kinetic.Ellipse({
x:400,
y:stage.getHeight() / 2,
radius:{
x:100,
y:50
},
fill:"yellow",
stroke:"black",
strokeWidth:4,
draggable:true
});
oval.on("mouseover", function () {
document.body.style.cursor = "pointer";
});
oval.on("mouseout", function () {
document.body.style.cursor = "default";
});
circle.on("mousedown", function(evt){
var x = evt.clientX;
var y = evt.clientY;
var crossHorizontal = new Kinetic.Line({
points: [x-5, y, x+5, y],
stroke: "black",
strokeWidth: 1
});
var crossVertical = new Kinetic.Line({
points: [x, y-5, x, y+5],
stroke: "black",
strokeWidth: 1
});
var anotherlayer = new Kinetic.Layer();
anotherlayer.add(crossHorizontal);
anotherlayer.add(crossVertical);
stage.add(anotherlayer);
});
// add the shapes to the layer
layer.add(circle);
layer.add(oval);
// add the layer to the stage
stage.add(layer);
stage.add(messagelayer);
var canvas = messagelayer.getCanvas();
var context = canvas.getContext('2d');
var theDiv = document.getElementById('container');
theDiv.addEventListener('mousemove', function (evt) {
var mousePos = getMousePos(theDiv, evt);
var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
writeMessage(canvas, message);
}, false);
}
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
canvas.clear();
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
// return relative mouse position
var mouseX = evt.clientX ;
var mouseY = evt.clientY ;
return {
x:mouseX,
y:mouseY
};
}