如何恢復Kinetic.js mouseevent

如何恢復Kinetic.js事件？我編寫了一個Kinetic.js「形狀按鈕」，它可以監聽mouseover和mouseout事件。當我點擊它時，它會改變顏色，不再聽取鼠標懸停/熄滅。我希望它再次聽到鼠標懸停和鼠標移動，當我再次單擊它時。我tryed刪除點擊事件，並在這兩個事件恢復等，但我不能與 circle.on("eventname") 還原一個事件，我必須這樣定義 circle.on("eventname", function(){//do stuff here}); 功能，但薩德會在一個連續循環結束定義功能如何恢復Kinetic.js mouseevent

謝謝你的回答！

這裏是我的代碼：

<head> 
     <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"> </script> 
     <script> 

      var layer = new Kinetic.Layer(); 
      var sfcolor = '#00ff00'   
      var nfcolor = '#0000ff'   
      var cfcolor = '#ff0000'   
      var smcolor = '#009a00'   
      var nmcolor = '#00009a'   
      var cmcolor = '#9a0000'   
      var slcolor = '#007000'   
      var nlcolor = '#000070'   
      var clcolor = '#700000'   
      function drawCircle(sx, sy, sradius, sstrokeWidth) { 
       var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 }); 
       var circleLayer = new Kinetic.Layer(); 
       //circle 
       var scircle = new Kinetic.Circle({ 
        x: sx, 
        y: sy, 
        radius: sradius, 
        fill: { 
        start: { 
         x: 0, 
         y: 0, 
         radius: 0 
        }, 
        end: { 
         x: 0, 
         y: 0, 
        radius: sradius 
        }, 
       colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor] 
     }, 
        stroke: slcolor, 
        strokeWidth: sstrokeWidth 
       }); 
       scircle.on("mouseover.event1", function() { 
        this.setFill({ 
         start: { 
          x: 0, 
          y: 0, 
          radius: 0 
         }, 
         end: { 
          x: 0, 
          y: 0, 
          radius: sradius 
         }, 
         colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor] 
       }); 
        this.setStroke(nlcolor); 
        scircle.off("click.event2"); 
        circleLayer.draw(); 
       }); 
       scircle.on("mouseout.event1", function() { 
        this.setFill({ 
         start: { 
          x: 0, 
          y: 0, 
          radius: 0 
         }, 
         end: { 
          x: 0, 
          y: 0, 
          radius: sradius 
         }, 
         colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor] 
        }); 
        this.setStroke(slcolor); 
        scircle.off("click.event2"); 
        circleLayer.draw(); 
       }); 
       scircle.on("click.event1", function() { 
        this.setFill({ 
         start: { 
          x: 0, 
          y: 0, 
          radius: 0 
         }, 
         end: { 
          x: 0, 
          y: 0, 
          radius: sradius 
         }, 
         colorStops: [0, cfcolor, 0.5, cmcolor, 1, clcolor] 
        }); 
        this.setStroke(clcolor); 
        scircle.off("mouseout.event1"); 
        scircle.off("mouseover.event1"); 
        scircle.off("click.event1"); 
        scircle.on("click.event2", function() { 
         this.setFill({ 
          start: { 
           x: 0, 
           y: 0, 
           radius: 0 
          }, 
          end: { 
           x: 0, 
           y: 0, 
           radius: sradius 
          }, 
          colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor] 
         }); 
         this.setStroke(clcolor); 
         scircle.on("mouseout.event1"); 
         scircle.on("mouseover.event1"); 
         scircle.on("click.event1"); 
         scircle.off("click.event2"); 
         circleLayer.draw(); 
        }); 

        circleLayer.draw(); 
       }); 


       circleLayer.add(scircle); 
       stage.add(circleLayer); 
      } 
      window.onload = function() { 
       drawCircle(200, 100, 50, 3); 
      }; 
     </script> 


    </head> 
    <body> 
     <div id="container"> 
     </div> 
    </body>

來源

2012-08-27 Ben Green

「開」功能需要兩個參數。第一個是事件名稱。第二個是處理程序。您需要傳遞處理程序才能正確恢復事件。

我想你應該嘗試分配你的事件處理程序，並通過他們向scircle.on

看看下面的代碼工作

乾杯！

<head> 
     <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"> </script> 
     <script> 

      var layer = new Kinetic.Layer(); 
      var sfcolor = '#00ff00'   
      var nfcolor = '#0000ff'   
      var cfcolor = '#ff0000'   
      var smcolor = '#009a00'   
      var nmcolor = '#00009a'   
      var cmcolor = '#9a0000'   
      var slcolor = '#007000'   
      var nlcolor = '#000070'   
      var clcolor = '#700000'   
      function drawCircle(sx, sy, sradius, sstrokeWidth) { 
       var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 }); 
       var circleLayer = new Kinetic.Layer(); 
       //circle 
       var scircle = new Kinetic.Circle({ 
        x: sx, 
        y: sy, 
        radius: sradius, 
        fill: { 
        start: { 
         x: 0, 
         y: 0, 
         radius: 0 
        }, 
        end: { 
         x: 0, 
         y: 0, 
         radius: sradius 
        }, 
        colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor] 
        }, 
        stroke: slcolor, 
        strokeWidth: sstrokeWidth 
       }); 

       mouseover_event1 = function() { 
        this.setFill({ 
         start: { 
          x: 0, 
          y: 0, 
          radius: 0 
         }, 
         end: { 
          x: 0, 
          y: 0, 
          radius: sradius 
         }, 
         colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor] 
        }); 
        this.setStroke(nlcolor); 
        scircle.off("click.event2"); 
        circleLayer.draw(); 
       }; 
       scircle.on("mouseover.event1", mouseover_event1); 

       mouseout_event1 = function() { 
        this.setFill({ 
         start: { 
          x: 0, 
          y: 0, 
          radius: 0 
         }, 
         end: { 
          x: 0, 
          y: 0, 
          radius: sradius 
         }, 
         colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor] 
        }); 
        this.setStroke(slcolor); 
        scircle.off("click.event2"); 
        circleLayer.draw(); 
       } 
       scircle.on("mouseout.event1", mouseout_event1); 

       click_event1 = function() { 
        this.setFill({ 
         start: { 
          x: 0, 
          y: 0, 
          radius: 0 
         }, 
         end: { 
          x: 0, 
          y: 0, 
          radius: sradius 
         }, 
         colorStops: [0, cfcolor, 0.5, cmcolor, 1, clcolor] 
        }); 
        this.setStroke(clcolor); 
        scircle.off("mouseout.event1"); 
        scircle.off("mouseover.event1"); 
        scircle.off("click.event1"); 
        scircle.on("click.event2", click_event2); 

        circleLayer.draw(); 
       }; 

       click_event2 = function() { 
        this.setFill({ 
         start: { 
          x: 0, 
          y: 0, 
          radius: 0 
         }, 
         end: { 
          x: 0, 
          y: 0, 
          radius: sradius 
         }, 
         colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor] 
        }); 
        this.setStroke(clcolor); 
        scircle.on("mouseout.event1", mouseout_event1); 
        scircle.on("mouseover.event1", mouseover_event1); 
        scircle.on("click.event1", click_event1); 
        scircle.off("click.event2"); 
        circleLayer.draw(); 
       }; 

       scircle.on("click.event1", click_event1); 


       circleLayer.add(scircle); 
       stage.add(circleLayer); 
      } 
      window.onload = function() { 
       drawCircle(200, 100, 50, 3); 
      }; 
     </script> 


    </head> 
    <body> 
     <div id="container"> 
     </div> 
    </body>

來源

2012-08-27 17:41:44 maiconio

嘿，maiconio，它的超級有效！感謝你們對我的幫助。你有一個想法，我可以如何發揮一些功能，如thad？我必須計數事件id（test.event1到test.event3和tes.event2到test.event4），並且我必須提供容器id和functionid。如果你回答會很好，歡迎Ben Green –

如何恢復Kinetic.js mouseevent

回答

相關問題