KineticJS：隱藏溢出圖層的內容

我試圖將圖像添加到畫布，但將其限制爲其放入的圖層的大小。我爲圖層設置了width和height，但它仍未做我想做的事。無論如何，如果內容在邊界外可見，爲什麼會有寬度和高度？KineticJS：隱藏溢出圖層的內容

是否有解決方案來限制容器內的內容？

來源

2013-06-24 Andrew

您可以隱藏在幾個方面

的淨化溢出動能Image對象的內容：所有kineticJS層總是大小爲舞臺（不可更改）

相同但是，您可以將圖像放入KineticJS圖像對象中，然後操作圖像。

解決方案＃1：使用圖像對象offset屬性：

可以使用KineticJS圖像的物體，像視到使用offset財產較大的圖像。如果您稍後想要將視口移動到原始圖像的另一部分，此方法很有用。

解決方案2：使用圖像對象crop屬性：

您可以裁剪較大的原始圖像，以適應較小的KineticJS圖像對象。如果您想永久查看原始圖像的裁剪部分，此方法非常有用。順便說一句，如果你想縮放裁剪的部分，這種方法也很有用。

將crop屬性添加到KineticJS圖像對象時，會根據您的規格裁剪原始圖像。這樣可以讓你保留原始圖像的所需部分並剪掉不需要的部分。

enter image description here

kImage=new Kinetic.Image({ 
    image:img, 
    x:30, 
    y:30, 
    width:110, 
    height:110, 
    crop: { 
     x: 150, 
     y: 122, 
     width: 110, 
     height: 110 
    } 
});

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/KbESf/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script> 

<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:300px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 300, 
     height: 150 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 

    var kImage; 

    var img=new Image(); 
    img.onload=function(){ 
     addCroppedImage(); 
    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png"; 

    function addCroppedImage(){ 

      kImage=new Kinetic.Image({ 
       image:img, 
       x:30, 
       y:30, 
       width:110, 
       height:110, 
       crop: { 
        x: 150, 
        y: 122, 
        width: 110, 
        height: 110 
       } 
      }); 
      layer.add(kImage); 
      layer.draw(); 
     } 

}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <p>Cropped image on Kinetic layer</p> 
    <div id="container"></div> 
    <p>Original Image</p> 
    <img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png"> 
</body> 
</html>

來源

2013-06-25 05:06:49 markE

這正是我一直在尋找:)的'crop'財產 – Andrew

KineticJS：隱藏溢出圖層的內容

回答

相關問題