EaselJs 形状 hotTest 无法设置 alpha 或可见性

Question

From the sample I created 当 mousedown 画线时，我无法设置圆的 alpha/可见性。但是当它检测到 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

这不起作用的主要原因是您使用的阶段永远不会自行清除。这给了你 "paint brush" 的好处，因为它只是在你画的时候添加新的曲线，但是圆永远不会被删除，因为它是画在 canvas 上的。如果您更改 alpha，它只会绘制在当前圆的顶部。这也是为什么你的圆圈会出现锯齿，因为它不断地在自身之上绘制，乘以 alpha。

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

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

您使用的 hitTest 代码不正确，因为它总是根据圆的本地坐标检查笔的 x/y 位置——这意味着圆的位置无关紧要.要解决此问题，您需要找到本地坐标：

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

这是显示该行为的更新 fiddle：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();

我还做了一些其他的修改：

删除了更新舞台的 Ticker 侦听器。当内容更改时，您的 mousemove 已经更新了舞台。如果您想为其他内容重新引入代码更新，请删除其他地方的 stage.update() 调用，因为它们是多余的。
将 drawingCanvas 移动到 circle/container 下面。这只是确保圆圈对于演示始终可见

这是包含这些更改的最终演示： http://codepen.io/lannymcnie/pen/NNYLPX?editors=0010

希望对您有所帮助！

EaselJs 形状 hotTest 无法设置 alpha 或可见性

EaselJs shape hitTest unable to set alpha or visiblity

createjs

easeljs