[英]Animation in KineticJS
我在圖層上添加了一個圓圈。 在該層的頂部,我添加了一個文本。 我想在鼠標懸停在圓上時運行動畫,但是當鼠標到達文本時,將調用mouseout
回調函數。 我該如何預防?
var circle = new Kinetic.Circle({
x: j * xcenterstep + xshift,
y: i * ycenterstep + yshift,
radius: t_radius,
fill: t_fill,
stroke: t_stroke,
strokeWidth: t_stroke_w,
strokeOpacity: 0.1,
opacity: 0.3 + t_number * 0.05,
});
if (t_number) {
circle.tw;
circle.on("mouseover", function () {
this.tw = new Kinetic.Tween({
node: this,
duration: 0.3,
strokeWidth: 6
});
this.tw.play();
});
circle.on("mouseout", function () {
this.tw.reverse();
});
}
// Adding the text
var radiusText = new Kinetic.Text({
x : circle.getX(),
y : circle.getY(),
text : t_number,
fontSize : radius,
fill : '#fff',
fontStyle: 'bold',
align : 'center'
});
radiusText.setOffset({
x : radiusText.getWidth()/2,
y : radiusText.getHeight()/2
});
bgLayer.add(circle);
bgLayer.add(radiusText);
我認為最好使用mouseenter
事件。 您可以禁用文本事件以防止mouseout
移出圈子。
radiusText.listening(false)
查看您的代碼,您缺少}
來關閉if (t_number) {
。 我不確定它是否應該包含mouseover
和mouseout
事件,但它可能導致您的代碼響應與預期不同。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.