EaselJs şekil hitTest alpha veya visiblity ayarlanamıyor

Question

From the sample I created Mousedown draw line olduğunda dairenin alpha/visiblity değerini ayarlayamıyorum. Ancak, hitTest'i tespit ettiğinde günlüğe kaydetme kabiliyetine sahibim .. Bunun için tavsiye var mı?

Aşağıda kodlarının blok şudur: kendini temizler asla bir sahne kullanarak çünkü bu çalışmıyor başlıca nedeni olduğunu

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

. Bu size bir "boya fırçasının" yararını sağlar, çünkü çizerken sadece yeni eğriler ekler, ancak çember tuval üzerine boyanması nedeniyle asla çıkartılamaz. Alfa'yı değiştirirseniz, yalnızca geçerli dairenin üstüne çizilir. Bu aynı zamanda, çemberinizin sürekli olarak üst üste çektiği ve alfa ile çarptığı için tüm takma adların da alınabilmesidir.

Alfa ayarlanması yerine x konumunu hareket ettiren daireyi gösteren hızlı bir düzenleme. orjinal pozisyonu orjinal pozisyonunda yuvarladığınızda 10 piksel sağa hareket edecektir. bu her zaman dairenin yerel koordinat karşı kalemin X/Y konumu kontrol yana

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

kullanmış hitTest kodu da doğru değildir - bu çemberin konumu kokan demektir önemli değil. Bunu düzeltmek için, bunun yerine yerel koordinatları bulmalıyız:

İşte

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

o davranışı gösteren güncelleştirilmiş keman olduğunu: http://codepen.io/lannymcnie/pen/grejVg?editors=0010

---

Ancak

, muhtemelen aradığınız efekti elde etmek için, Farklı bir yaklaşım benimsemeli. Sahne alanını otomatik olarak temizle yerine, önbelleğe alınmış bir Şekil kullanın ve çizerken önbelleği güncelleyin. Bu boya efektini sağlayacaktır, ancak sahnenin geri kalanının her zamanki gibi güncellenmesine izin verin.

• sahne günceller Ticker dinleyici Kaldırıldı:

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

  Ben de birkaç diğer değişiklikler yaptık. İçerikleriniz değiştiğinde mousemove'iniz zaten sahneyi günceller. Diğer içeriklerin satır güncellemesini yeniden oluşturmak isterseniz, yedekli oldukları için stage.update() çağrılarını her yerde kaldırın.
• ÇizimCanvas'ı dairenin/kabın altına taşıdı. yardımcı olur http://codepen.io/lannymcnie/pen/NNYLPX?editors=0010

  Umut: Bu sadece çember İşte bu değişikliklerle nihai demo her zaman demo

için görünür emin olur!