创建一个自定义的功能打画形状kineticjs,我们可以设置drawhitfunc财产。成功绘制功能,kineticjs将绘制一个用于碰撞检测区域的功能。使用自定义绘制命中函数可以有几个好处,如使严重的地区大,它的用户交互容易与形状,使部分形状检测和其他人没有,或简化命中绘制函数,为了提高渲染性能。
说明:鼠标悬停,mouseout,并在MouseDown,在明星和观察到严重的地区是一个超大型的圆圈包围的形状。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
<script defer="defer">
function writeMessage(messageLayer, message) {
var context = messageLayer.getContext();
messageLayer.clear();
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var shapesLayer = new Kinetic.Layer();
var messageLayer = new Kinetic.Layer();
var star = new Kinetic.Star({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
numPoints: 7,
innerRadius: 50,
outerRadius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
drawHitFunc: function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.arc(0, 0, this.getOuterRadius() + 10, 0, Math.PI * 2, true);
context.closePath();
canvas.fillStroke(this);
}
});
star.on('mouseover', function() {
writeMessage(messageLayer, 'Mouseover star');
});
star.on('mouseout', function() {
writeMessage(messageLayer, 'Mouseout star');
});
star.on('mousedown', function() {
writeMessage(messageLayer, 'Mousedown star');
});
star.on('mouseup', function() {
writeMessage(messageLayer, 'Mouseup star');
});
shapesLayer.add(star);
stage.add(shapesLayer);
stage.add(messageLayer);
</script>
</body>
</html>