EaselJs形状hitTest无法设置alpha或visiblity

Question

​​ 当mousedown绘制线时，我无法设置圆的alpha/visiblity。但我能够控制台登录时，它的检测hitTest ..是否有建议呢？

下面的代码块：

var canvas, stage; 
    var drawingCanvas; 
    var oldPt; 
    var oldMidPt; 
    var title; 
    var color; 
    var stroke; 
    var colors; 
    var index; 
    var rect, circle1; 
    var currMidPt; 

    $(document).ready(function() { 
     init(); 

    }); 

    function init() { 
     canvas = document.getElementById("canvas"); 
     index = 0; 
     colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"]; 

     //check to see if we are running in a browser with touch support 
     stage = new createjs.Stage(canvas); 
     stage.autoClear = false; 
     stage.enableDOMEvents(true); 

     createjs.Touch.enable(stage); 
     createjs.Ticker.setFPS(24); 
     createjs.Ticker.on("tick", tick); 

     drawingCanvas = new createjs.Shape(); 

     stage.addEventListener("stagemousedown", handleMouseDown); 
     stage.addEventListener("stagemouseup", handleMouseUp); 

     title = new createjs.Text("Click and Drag to draw", "36px Arial", "#777777"); 
     title.x = 300; 
     title.y = 200; 

    rect = new createjs.Shape(); 
    rect.graphics.beginFill("#000").drawRect(0, 0, stage.canvas.width, stage.canvas.height); 
    var container = new createjs.Container(); 
    container.x = 0; 
    container.y = 0; 

     stage.addChild(container, title); 

     stage.addChild(drawingCanvas); 




    circle1 = new createjs.Shape(); 
    circle1.graphics.beginFill("#990000").drawCircle(120,120,40); 

    container.addChild(circle1); 

     stage.update(); 
    } 

    function handleMouseDown(event) { 
     if (!event.primary) { return; } 
     if (stage.contains(title)) { 
      stage.clear(); 
      stage.removeChild(title); 
     } 
     color = colors[(index++) % colors.length]; 
     stroke = Math.random() * 30 + 10 | 0; 
     oldPt = new createjs.Point(stage.mouseX, stage.mouseY); 
     oldMidPt = oldPt.clone(); 
     stage.addEventListener("stagemousemove", handleMouseMove); 
    } 

    function handleMouseMove(event) { 
     if (!event.primary) { return; } 
     var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1); 

     drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y); 

     oldPt.x = stage.mouseX; 
     oldPt.y = stage.mouseY; 

     oldMidPt.x = midPt.x; 
     oldMidPt.y = midPt.y; 

     currMidPt = midPt; 
     if(circle1.hitTest(currMidPt.x, currMidPt.y)) { 
       console.log('test'); 
       circle1.alpha = 0.6; 
      circle1.visible = false; 
      } 
     stage.update(); 
    } 

    function tick(event) { 


    // console.log(ndgmr.checkPixelCollision(drawingCanvas,circle1,0,false)); 

     stage.update(event); 
    } 

    function handleMouseUp(event) { 
     if (!event.primary) { return; } 
     stage.removeEventListener("stagemousemove", handleMouseMove); 
    } 

Answer 1

的主要原因，这并不工作，是因为你使用的是从来没有清除自己的舞台。这给了你“画笔”的好处，因为它只是在你画的时候添加新的曲线，但是因为它被画在画布上，所以圆永远不会被移除。如果您更改了alpha，它只会绘制在当前圆圈的顶部。这也是为什么你的圈子会得到所有别名的原因，因为它不断地在自己的头顶上，乘以alpha。

这是一个快速编辑，显示移动其x位置的圆圈，而不是调整Alpha。任何时候你滚过原始位置它会向右移动10个像素。

http://codepen.io/lannymcnie/pen/redrgo?editors=0010

您使用的则hitTest代码是不正确的，虽然，因为它总是会针对圆的本地坐标笔的X/Y位置 - 这意味着圆的位置没有按”没关系。为了解决这个问题，你需要找到本地坐标，而不是：

currMidPt = circle1.globalToLocal(midPt.x, midPt.y); 

此处给出了一个行为的一个更新的小提琴：http://codepen.io/lannymcnie/pen/grejVg?editors=0010

---

但是，要获得你可能寻找的效果，必须采取不同的方法。而不是使用舞台自动清除，使用缓存的形状，并绘制时更新缓存。这将提供绘画效果，但让平台的其余部分照常更新。

// Remove this! 
stage.autoClear = false; 

// Cache the drawingCanvas once after creating it 
drawingCanvas = new createjs.Shape(); 
drawingCanvas.cache(0,0,canvas.width,canvas.height); 

// After drawing, update the cache. This is at the end of the mousemove function. 
// Use "source-over" to apply the new contents on top, instead of clearing the cache. 
drawingCanvas.updateCache("source-over"); 
stage.update(); 

我还做了一些其他的变化：

• 删除了新浪体育讯北京时间侦听器更新阶段。当内容改变时，你的鼠标移动已经更新了舞台。如果您想重新引入其他内容的代码更新，则可以在其他地方删除stage.update()调用，因为它们是冗余的。
• 将drawingCanvas移动到圆/容器下方。这只是确保圈子始终是演示

可见这里是这些变化的最终演示： http://codepen.io/lannymcnie/pen/NNYLPX?editors=0010

希望帮助！