Question

From the sample I created 当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

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

// 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移动到圆圈/容器下方。这只是确保圆圈始终可见于演示

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

希望有所帮助！

EaselJs形状hitTest无法设置alpha或visiblity

1 个答案: