KineticJs Прямой частичный удар, то есть только верхняя граница?

В KineticJS мне интересно, могу ли я иметь частичную границу для прямоугольника? например, отображать только верхнюю границу, css-эквивалентность, border-top: 1pxKineticJs Прямой частичный удар, то есть только верхняя граница?

источник

2014-01-20 Tony Fantacy

В настоящее время нет (5.0.0). Но вы можете нарисовать линию поверх прямоугольника.

источник

2014-01-20 11:16:05 lavrton

Вы можете создать CSS эквивалент:

создать группу размера, до нужного прямоугольника плюс границы,
добавить «границу» Прямоугольник в группу размера, до нужного прямоугольника плюс границы ,
добавить «заполнить» прямоугольник в группу размера до нужного прямоугольника и смещение границ

Поскольку ваш прямоугольник 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 Прямой частичный удар, то есть только верхняя граница?

ответ

Смежные вопросы