爲什麼我不能繪製樣條不是直線？

我通過使用KineticJs繪製了一個二次曲線，它似乎是一個形狀類型的對象，我該如何激活並移動它？爲什麼我不能繪製樣條不是直線？

在這裏看到的代碼：http://jsfiddle.net/walkingp/FK2Eh/3/

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

爲什麼我不能劃出一道弧線，現在是一條直線？

來源

2014-03-26 WangHongjian

請提供jsBin /的jsfiddle/plunkr顯示您有 – SoluableNonagon

嗨什麼麻煩的例子，我已經更新了我的問題。 – WangHongjian

您的代碼繪製了一組由曲線連接的點 - 這是樣條曲線。

因此，您可能會重構代碼以使用Kinetic.Spline，而不是使用Kinetic.Shape手動繪製樣條曲線。

原因是，對於Kinetic.Shapes，您必須定義您自己的用於拖動樣條曲線的點擊函數。樣條函數的hit函數可能相當複雜。

這裏的示例代碼和演示：http://jsfiddle.net/m1erickson/Lwdym/

<!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-v5.0.1.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); 

     var spline = new Kinetic.Line({ 
     points: [20,50,240,50,200,150,250,150], 
     stroke: 'blue', 
     strokeWidth: 12, 
     lineCap: 'round', 
     tension: 1, 
     draggable:true 
     }); 
     layer.add(spline); 
     layer.draw(); 


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

</script>  
</head> 

<body> 
    <h4>A draggable Spline</h4> 
    <div id="container"></div> 
</body> 
</html>

來源

2014-03-26 22:36:37 markE

嗨，這裏是我的更新版本.http：//jsfiddle.net/walkingp/FK2Eh/;我有兩個問題，一個是爲什麼我的線路仍然是一條直線，另一個問題是當我嘗試移動我的線路時，另一條線路將被繪製，如何涉及？謝謝。 – WangHongjian

我再次更新它。請看看它。 – WangHongjian

爲什麼我不能繪製樣條不是直線？

回答

相關問題