Mouseover, hover effects
Victor Gladkikh
I've read about hitTest, but it's seems that I will need to cycle through all objects to return their state.
Jürg Lehni
This functionality is all new, only present in the nightly build, and thus not documented yet.
But using the nightly build, this should work:
item.onMouseEnter = function() {
this.fillColor = 'red';
}
item.onMouseLeave = function() {
this.fillColor = 'blue';
}
Alternatively, you can also register and deregister events using the attach and detach methods:
item.attach('mouseenter', function() {
this.fillColor = 'red';
});
item.attach('mouseleave', function() {
this.fillColor = 'blue';
});
All these events are present:
onMouseEnter, onMouseLeave, onMouseOver, onClick, onDoubleClick, onMouseDrag
And their event names:
'mouseenter', 'mouseleave', 'mouseover', 'click', 'doubleclick', 'mousedrag'
I hope this helps, until we get some documentation together.
Best,
Jürg
Victor Gladkikh
Xin Wang
It seems that onClick will take effect only if other mouse event is
also registered. For example:
var myCircle = new Path.Circle(new Point(100, 70), 50);
myCircle.fillColor = 'black';
myCircle.onClick = function () {
console.log('click')
}
Above code will not work, but following works:
var myCircle = new Path.Circle(new Point(100, 70), 50);
myCircle.fillColor = 'black';
myCircle.onClick = function () {
console.log('click')
}
myCircle.onMouseDrag = function () {
console.log('drag')
}
--
王欣 (Xin Wang)
blog: http://dram.me/
Jürg Lehni
J
Vladimir Kaluga
onMouseenter/onMouseLeave are working incorrect with polygons in some
cases:
<!DOCTYPE html>
<html>
<head>
<title>Paper</title>
</head>
<body>
<canvas id="mainView" resize="true"></canvas>
<script src="../Lib/Paper/paper.js" type="text/javascript"></
script>
<script type="text/javascript">
paper.install(window);
window.onload = function () {
paper.setup("mainView");
var center = new Point(100, 100);
var sides = 6;
var radius = 20;
var hexagon = new Path.RegularPolygon(center, sides,
radius);
hexagon.fillColor = 'black';
hexagon.onMouseEnter = function () {
this.fillColor = 'red';
}
hexagon.onMouseLeave = function () {
this.fillColor = 'black';
}
paper.view.draw();
}
</script>
</body>
</html>
The hexagon is flickering when mouse move over it (tested in IE 9, FF
9, Chrome 16, Opera 11).
But when radius is 21 then code are working properly.
Jonathan Puckey
Could you please post this issue to: http://github.com/paperjs/paper.js/issues
Thanks!
greetings,
Jonathan
Vladimir Kaluga
Kevin Scott
Алексей Пономаренко
воскресенье, 2 сентября 2012 г., 19:25:23 UTC+3 пользователь Kevin Scott написал:
Jürg Lehni
Jürg
Alexey Ponomarenoko
вторник, 25 декабря 2012 г., 16:40:08 UTC+2 пользователь Jürg Lehni написал:
Alexey Ponomarenoko
среда, 26 декабря 2012 г., 17:47:01 UTC+2 пользователь Alexey Ponomarenoko написал: