KineticJS鼠标悬停

问题描述：

我试图改变鼠标指针鼠标悬停图像的图像，这里是我的脚本：KineticJS鼠标悬停

   var sc = new Kinetic.Layer(); 
       var sCircle = new Image(); 
       var sCircleImage; 
       sCircle.onload = function() { 
        sCircleImage = new Kinetic.Image({ 
         x: 186.183, 
         y: 185.89, 
         width: 142.114, 
         height: 140.22, 
         image: sCircle 
        }); 
        sc.add(sCircleImage); 
        sc.draw(); 
       }; 
       sCircle.src = '../../Content/images/arrow_circle.png'; 



       sCircleImage.on('mouseover', function() { 
       document.body.style.cursor = 'pointer'; 
       }); 
       sCircleImage.on('mouseout', function() { 
       document.body.style.cursor = 'default'; 
       });

我收到以下错误：无法获取的未定义或空引用“上”属性。我希望你的建议。提前致谢。

答

在图像加载函数内部使用mouseover和mouseout函数。请尝试下面的代码

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
     body 
     { 
      margin: 0px; 
      padding: 0px; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
    </div> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script> 
    <script> 
     var stage = new Kinetic.Stage({ 
      container: 'container', 
      width: 578, 
      height: 200 
     }); 
     var sc = new Kinetic.Layer(); 
     var sCircle = new Image(); 
     var sCircleImage; 
     sCircle.onload = function() { 
      sCircleImage = new Kinetic.Image({ 
       x: 186.183, 
       y: 185.89, 
       width: 142.114, 
       height: 140.22, 
       image: sCircle 
      }); 
      sc.add(sCircleImage); 
      sc.draw(); 
      stage.add(sc); 
      sCircleImage.on('mouseover', function() { 
       document.body.style.cursor = 'pointer'; 
      }); 
      sCircleImage.on('mouseout', function() { 
       document.body.style.cursor = 'default'; 
      }); 
     }; 
     sCircle.src = '../../Content/images/arrow_circle.png'; 
    </script> 
</body> 
</html>

非常感谢，它工作得很好。 – hncl 2013-03-22 15:33:24

相关推荐