KineticJs Rect部分描邊，即只有上邊框？

在KineticJS中，我想知道如果我可以只有部分邊框的矩形？例如，只渲染頂部邊框，CSS等效，邊框頂部：1pxKineticJs Rect部分描邊，即只有上邊框？

來源

2014-01-20 Tony Fantacy

當前沒有（5.0.0）。但是你可以在矩形上畫一條線。

來源

2014-01-20 11:16:05 lavrton

您可以創建一個CSS相當於：

創建一個組大小爲所需的矩形加邊框，
添加一個「邊界」 RECT到組大小爲所需的矩形加邊框，
添加「補」矩形的組大小以所期望的RECT和由邊界偏移

由於您的邊界矩形是一個組，您可以移動/拖動該組。

演示：http://jsfiddle.net/m1erickson/tVAzR/

enter image description here

這裏的示例代碼：

<!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.7.2.min.js"></script> 

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

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

    borderRect(10,10,200,150,12,6,3,0,"green","red"); 

    function borderRect(x,y,width,height, 
     topBorder,rightBorder,bottomBorder,leftBorder, 
     fill,borderColor){ 

     var w=width+leftBorder+rightBorder; 
     var h=height+topBorder+bottomBorder; 

     var g=new Kinetic.Group({ x:x, y:y, width:w, height:h }); 
     layer.add(g); 

     var bk=new Kinetic.Rect({ 
      x:0,y:0,width:w,height:h,fill:"black" 
     }); 
     g.add(bk); 

     var rect=new Kinetic.Rect({ 
      x:leftBorder, y:topBorder, width:width, height:height, fill:fill 
     }); 
     g.add(rect); 

     layer.draw(); 
    } 


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

</script>  
</head> 

<body> 
    <h4>Borders:<br>top:12<br>right:6</br>bottom:3</br>left:0</h4> 
    <div id="container"></div> 
</body> 
</html>

來源

2014-01-20 17:37:59 markE

就像一個魅力。增加額外的複雜性，但這是迄今爲止我找到的最佳解決方案。 –

KineticJs Rect部分描邊，即只有上邊框？

回答

相關問題