Kineticjs的圖像總是在頂部（如水印）

如何在kineticjs上始終使用頂部圖像？它不工作。我想做一個像水印一樣的東西，每一個添加的圖層都會出現在它後面。Kineticjs的圖像總是在頂部（如水印）

所以，我將與圖像（像水印）開始，然後我將添加圖層，然後當我添加圖層水印將始終在頂部（Z-指數）

<script> 
    var object_desktop = {width: 650, height: 400}; 

    var stage = new Kinetic.Stage({ 
     container: 'canvas', 
     width: object_desktop.width, 
     height: object_desktop.height 
    }); 

    //create background 
    var background = new Kinetic.Rect({ 
     x: 0, 
     y: 0, 
     width: object_desktop.width, 
     height: object_desktop.height, 
     fill: "#ffffff", 
     stroke: "#666666", 
     strokeWidth: 1 
    }); 
    //create group 
    var elementGroup = new Kinetic.Group({ 
     x: 0, 
     y: 0 
    }); 
    elementGroup.add(background) 
    //create layer 
    var layer = new Kinetic.Layer(); 
    layer.add(elementGroup); 

    stage.add(layer); 
    stage.draw(); 





    $('button[type=submit]').click(function() { 
     stage.toDataURL({ 

      callback: function (dataUrl) { 
       $('input[name=upload]').val(dataUrl); 
       $('#footer_form').submit(); 
      } 
     }); 
     return false; 
    }); 

    if (!(window.File && window.FileReader && window.FileList && window.Blob)) { 
     alert('Este browser não suporta essa funcionalidade, atualize-o.'); 
    } 

    $(document).ready(function() { 

     var img = new Image(); 

     img.onload = function(){ 

      Image= new Kinetic.Image({ x: 0, y: 0, width: 83, height: 67,image: img, draggable:true}); 
      layer.add(Image); 
      layer.draw(); 
     }; 
     img.src = '{{ STATIC_URL }}img/logotipo2.png'; 
     initStage(); 
    }); 
</script>

來源

2014-07-18 Max Ferreira

您可以在畫布div內使用絕對位置的（非畫布）div。 –

但是，如果我使用絕對位置div，它不會拖動:( –

我相信每一個形狀（包括Kinetic.Image）都需要添加到一個圖層中，我們稱之爲watermarkLayer。在將水印圖像添加到watermarkLayer後，您可以使用watermarkLayer.moveToTop();，以便它將顯示在您以前可能定義的每個其他圖層的頂部（z-index）。如果在添加水印後需要添加其他形狀/圖層，則可以使用moveDown()或moveToBottom()。

關於形狀分層，您可以看到一個簡單示例here。

來源

2014-07-22 08:17:28 user3632710

Kineticjs的圖像總是在頂部（如水印）

回答

相關問題