EaselJS：改变鼠标点击时的形状填充颜色

  • Z时代
  • 2024-01-10
  • 分类：问答

我很难与EaselJS一起工作。基本上我想创建一个简单的网格，并强调选择的实际元素：EaselJS：改变鼠标点击时的形状填充颜色

var stageWidth = 800, 
    stageHeight = 600, 
    cell_size = 50, 
    w = 16, 
    h = 12, 
    n = w * h, 
    canvas, 
    stage, 
    background; 
$(document).ready(function(){ 
      canvas = $("#container")[0];  
      stage = new createjs.Stage(canvas); 
      var x_pos = 0, 
       y_pos = 0, 
       res = 0, 
       grid_el; 
      for(i=0;i<n;i++){ 
       res = i%w; 
       if(i>0){ 
        if(res===0){ 
         x_pos = 0; 
         y_pos++; 
        } else { 
         x_pos++; 
        } 
       } 
       grid_el = new createjs.Shape(); 
       grid_el.graphics.setStrokeStyle(2,"square").beginStroke("#000000"); 
       grid_el.graphics.beginFill("#70FF85"); 
       grid_el.graphics.rect(x_pos * cell_size,y_pos * cell_size,cell_size,cell_size); 
       grid_el.x_pos = x_pos * cell_size; 
       grid_el.y_pos = y_pos * cell_size; 
       grid_el.name = "quad"; 
       stage.addChild(grid_el); 
      } 
      stage.update(); 
      stage.onMouseDown = function(e){ 
       console.log(e); 
       var quad = this.getObjectsUnderPoint(e.stageX,e.stageY); 
       var clone = quad[0].graphics.clone(); 
       clone.beginFill("#51D9FF"); 
       quad[0].graphics = new createjs.Graphics(clone); 
       stage.update(); 
      } 
     });

我试图克隆实际元素的图形性能，改变填充颜色，然后更新的阶段，但我只得到一个白色的元素，只是像它不认识新的图形属性。

感谢您的任何帮助。

回答：

我会推荐使用onMouseOver/onMouseOut调用您正在创建的形状或显示对象的背部。 当你可以更新你的颜色。

这是一个简单的演示，可能有助于说明我的观点。

Link to demo

var stage = new createjs.Stage("test"); 
createjs.Touch.enable(stage); 
stage.enableMouseOver(10); 
var padding = 1; 
var width = 55; 
var height = 55; 
var cols = 15; 
for(var i=0;i<200;i++) { 
    var s = new createjs.Shape(); 
    s.overColor = "#3281FF" 
    s.outColor = "#FF0000" 
    s.graphics.beginFill(s.outColor).drawRect(0, 0, width, height).endFill(); 
    s.x = (width + padding) * (i%cols); 
    s.y = (height + padding) * (i/cols|0); 
    s.onMouseOver = handleMouseOver; 
    s.onMouseOut = handleMouseOut; 
    stage.addChild(s) 
} 
createjs.Ticker.addListener(stage); 
function handleMouseOver(event) { 
    var target = event.target; 
    target.graphics.clear().beginFill(target.overColor).drawRect(0, 0, width, height).endFill(); 
} 
function handleMouseOut(event) { 
    var target = event.target; 
    target.graphics.clear().beginFill(target.outColor).drawRect(0, 0, width, height).endFill(); 
} 
function tick() { 
    stage.update(); 
}

希望这有助于。

回答：

，可考虑将KineticJS去，你只是做：

circle.on('click', function() { 
    // do stuff 
});

我相信KineticJS是唯一的帆布框架，反映了DOM事件模型（你可以绑定事件节点，它们可以泡，你可以杠杆事件代表团等）

以上是 EaselJS：改变鼠标点击时的形状填充颜色 的全部内容， 来源链接： utcz.com/qa/257401.html

回到顶部