我正在编写一个用户界面来确定点击对象的准确性。看到 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>
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
};
}
最佳答案
在 writeMessage 函数中添加“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
};
}
关于javascript - Kinectjs Canvas 上 mousedown 位置的准确性和clearRect 未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11818688/