CODEWITHSUNDEEP
javascriptcanvaskineticjs
Tony Fantacy
Tony Fantacy

Reputation: 63

KineticJs Rect partial stroke, ie top-border only?

In KineticJS, I'm wondering if I could just have partial border for a rectangle? for example, only render top-border, css equivalence, border-top : 1px

Upvotes: 0

Views: 412

Answers (2)

markE
markE

Reputation: 105015

You can create a CSS equivalent:

  • create a group sized to the desired rect plus borders,

  • add a "border" rect to the group sized to the desired rect plus borders,

  • add a "fill" rect to the group sized to the desired rect and offset by the borders

Since your bordered rect is a group, you can move/drag the group.

Demo: http://jsfiddle.net/m1erickson/tVAzR/

enter image description here

Here's example code:

<!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>

Upvotes: 2

lavrton
lavrton

Reputation: 20298

Currently no (5.0.0). But you can draw a line on top of rectangle.

Upvotes: 0

Related Questions