我正在编写一个用户界面来确定单击某个对象的准确性。看到KineticJS并认为这将是一个很好的工具。
我创建了一个带有圆圈的简单舞台。我试图在某人在圆圈内单击的点上画一个十字。我发现绘制的点偏移到屏幕上光标图标的右下角。另外我不确定为什么我似乎无法清除我绘制一些文本以显示鼠标坐标的区域。此刻，我在同一个地方得到了奇怪的文本覆盖。
感谢任何输入/建议。
谢谢。
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>
PointerRender.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
};
}
最佳答案
在显示消息层中添加“ var messagelayer = new Kinetic.Layer（）;”，并在writeMessage函数中添加“ canvas.clear（）;”以清除消息。
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
};
}