EaselJs shape hitTest kann Alpha oder Visiblity nicht setzen

Question

From the sample I created Ich kann die Alpha/Visibility des Kreises nicht festlegen, wenn die Mauszeigerlinie gezeichnet wird. Aber ich bin in der Lage, es zu loggen, wenn es hitTest erkennt. Gibt es da Ratschläge?

Unten ist der Block von Codes:

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

Der Hauptgrund, dies nicht ist nicht funktioniert, weil Sie eine Bühne verwenden, die sich nie löscht. Dies gibt Ihnen den Vorteil eines "Pinsels", da er beim Zeichnen nur neue Kurven hinzufügt, aber der Kreis kann nie entfernt werden, da er auf die Leinwand gemalt wird. Wenn Sie das Alpha ändern, wird es nur über dem aktuellen Kreis gezeichnet. Dies ist auch der Grund, warum Ihr Kreis Aliasing erhält, da er ständig auf sich selbst zieht und das Alpha multipliziert.

Hier ist eine schnelle Bearbeitung, die zeigt, dass der Kreis seine Position x verschiebt, anstatt das Alpha anzupassen. Jedes Mal, wenn Sie über die Originalposition rollen, wird es um 10 Pixel nach rechts verschoben.

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

Der hitTest Code, den Sie verwendet haben, wenn auch nicht korrekt ist, da es immer die x/y-Position des Stiftes gegen die lokalen Koordinaten des Kreises überprüft - dies bedeutet, dass die Position des Kreises doesn‘ t Angelegenheit. Um dies zu beheben, müssen Sie stattdessen die lokalen Koordinaten finden:

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

Hier eine aktualisierte Geige ist dieses Verhalten zeigt: http://codepen.io/lannymcnie/pen/grejVg?editors=0010

---

Allerdings zu bekommen die Wirkung, die Sie wahrscheinlich suchen, Sie müssen einen anderen Ansatz verfolgen. Verwenden Sie nicht die automatische Löschung der Bühne, sondern eine zwischengespeicherte Form und aktualisieren Sie den Cache beim Zeichnen. Dadurch wird der Farbeffekt bereitgestellt, aber der Rest der Bühne wird wie gewohnt aktualisiert.

// 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(); 

Ich habe auch ein paar andere Änderungen:

• den Ticker Zuhörer entfernt, die die Bühne aktualisiert. Ihr Mauszeiger aktualisiert die Bühne bereits, wenn sich der Inhalt ändert. Wenn Sie das Ticker-Update für andere Inhalte wieder einführen möchten, entfernen Sie die Rufnummern stage.update() überall sonst, da sie redundant sind.
• Die Zeichnung wurde verschoben. Canvas unter dem Kreis/Container. Dies macht nur sicher, dass der Kreis für die Demo immer sichtbar ist

Hier eine letzte Demo mit diesen Änderungen ist: http://codepen.io/lannymcnie/pen/NNYLPX?editors=0010

Hoffnung, das hilft!