Javascript KineticJs矩形部分笔划（仅上边框）？
在KineticJS中，我想知道我是否可以为矩形设置部分边框？例如，仅渲染上边框、css等效、上边框：1px当前为否（5.0.0）。但您可以在矩形顶部画一条线。您可以创建CSS等效项：Javascript KineticJs矩形部分笔划（仅上边框）？,javascript,canvas,kineticjs,Javascript,Canvas,Kineticjs,在KineticJS中，我想知道我是否可以为矩形设置部分边框？例如，仅渲染上边框、css等效、上边框：1px当前为否（5.0.0）。但您可以在矩形顶部画一条线。您可以创建CSS等效项： 创建一个大小为所需矩形加边框的组 将一个“边框”矩形添加到组中，大小为所需的矩形加上边框 将“填充”矩形添加到组中，该组大小为所需的矩形，并由边框偏移 由于带边框的矩形是一个组，因此可以移动/拖动该组 演示： 下面是示例代码： <!DOCTYPE html> <html> <
- 创建一个大小为所需矩形加边框的组
- 将一个“边框”矩形添加到组中，大小为所需的矩形加上边框
- 将“填充”矩形添加到组中，该组大小为所需的矩形，并由边框偏移
<!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>
原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var layer=新的动能层（）；
阶段。添加（层）；
borderRect（10,10200150,12,6,3,0，“绿色”、“红色”）；
函数borderRect（x，y，宽度，高度，
上边框，右边框，下边框，左边框，
填充，边框颜色）{
var w=宽度+左边框+右边框；
var h=高度+上边框+下边框；
var g=新的动力学群（{x:x，y:y，宽度：w，高度：h}）；
层。添加（g）；
var bk=新的动力学.Rect({
x:0，y:0，宽度：w，高度：h，填充：“黑色”
});
g、 添加（bk）；
var rect=新的动能.rect({
x:左边框，y:上边框，宽度：宽度，高度：高度，填充：填充
});
g、 添加（rect）；
layer.draw（）；
}
}); // end$（函数（）{}）；
边框：
顶部：12
右侧：6底部：3左侧：0