如何申請的z-index爲織物JS處理程序

setTimeout(function() { 
 
     var myImg = document.querySelector("#background"); 
 
     var realWidth = myImg.naturalWidth; 
 
     var realHeight = myImg.naturalHeight; 
 
     $("canvas").attr("width", realWidth); 
 
     $("canvas").attr("height", realHeight); 
 
     var source = document.getElementById('background').src; 
 
     var canvas = new fabric.Canvas('canvas'); 
 
     canvas.width = realWidth; 
 
     canvas.height = realHeight; 
 
     var ctx = canvas.getContext('2d'); 
 
     
 
     document.getElementById('file').addEventListener("change", function (e) { 
 
      var file = e.target.files[0]; 
 
      var reader = new FileReader(); 
 
      reader.onload = function (f) { 
 
       var data = f.target.result; 
 
       fabric.Image.fromURL(data, function (img) { 
 
        
 
        var oImg = img.set({ 
 
         left: 320 
 
         , top: 180 
 
         , angle: 00 
 
         , width: 200 
 
         , height: 200 
 
        }); 
 
        canvas.add(oImg).renderAll(); 
 
        var a = canvas.setActiveObject(oImg); 
 
        var dataURL = canvas.toDataURL({ 
 
         format: 'png' 
 
         , quality: 0.8 
 
        }); 
 
       }); 
 
      }; 
 
      reader.readAsDataURL(file); 
 
     }); 
 
     canvas.setOverlayImage(source, canvas.renderAll.bind(canvas), { 
 
      backgroundImageOpacity: 0.5 
 
      , backgroundImageStretch: false 
 
     }); 
 
     canvas.on('mouse:over', function (e) { 
 
      canvas.item(0).hasBorders = true; 
 
      canvas.item(0).hasControls = true; 
 
      canvas.setActiveObject(canvas.item(0)); 
 
     }); 
 
     canvas.on('mouse:out', function (e) { 
 
      canvas.item(0).hasBorders = false; 
 
      canvas.item(0).hasControls = false; 
 
      canvas.setActiveObject(canvas.item(0)); 
 
     }); 
 
     canvas.renderAll(); 
 
    }, 2000); 
 
    $("#save").click(function() { 
 
     function blobCallback(iconName) { 
 
      return function (b) { 
 
       var a = document.getElementById('download'); 
 
       a.download = iconName + ".jpg"; 
 
       a.href = window.URL.createObjectURL(b); 
 
      } 
 
     } 
 
     canvas.toBlob(blobCallback('wallpaper'), 'image/vnd.microsoft.jpg', '-moz-parse-options:format=bmp;bpp=32'); 
 
    });

.hide { 
 
      display: none; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cricmovie.com/bb-asserts/js/fabric.min.js"></script> 
 
<body> 
 
    <div class="container"> <img src="http://cricmovie.com/bb-asserts/images/person.png" id="background" class="hide"> 
 
     <input type="file" id="file"> 
 
     <br /> 
 
     <canvas id="canvas" class="img-responsive"></canvas> 
 
    </div> 
 
    <div class="container"> <a class="btn btn-primary" id="save">Save</a> <a class="btn btn-primary" id="download">Download</a> </div> 
 
</body>

我使用織物JS構建面罩應用當我有兩個圖像 1）圖像不被使用setOverlayImage施加到帆布面方法 2）只有用戶將上傳和相應調整。

我已經差不多完成了功能，但是我想在第一張圖像上方顯示織物處理程序，現在它們隱藏在第一張圖像後面。

參考圖片：Click here for reference Image

請查收運行代碼段

來源

2016-09-01 Bikshu s

你可以讓你的代碼運行在這裏的代碼示例或jsfiddle，所以它更容易調試？我也很困惑，因爲fabricjs句柄默認顯示在最上面。 – StefanHayden

感謝您的回覆，我已附上代碼示例中的運行代碼，請查找它 –

我認爲，所有你需要做的就是指定controlsAboveOverlay當你織物的實例。

var canvas = new fabric.Canvas('canvas', { 
     controlsAboveOverlay : true 
    });

來源

2016-09-02 13:30:22 StefanHayden

謝謝非常..爲您提供幫助 –

如何申請的z-index爲織物JS處理程序

回答

相關問題