Question

在KineticJS中，我想知道我是否可以只有一个矩形的部分边框？例如，仅渲染顶部边框，css等效，border-top：1px

Answer 1

您可以创建一个CSS等效项：

创建一个大小为所需矩形和边框的组，
将“border”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>

Answer 2

目前没有（5.0.0）。但是你可以在矩形的顶部画一条线。

KineticJs Rect部分笔划，即仅限顶部边界？

2 个答案: