Question

我通过使用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();
...

为什么我不能绘制曲线，现在它是一条直线？

Answer 1

您的代码正在绘制一组由曲线连接的点 - 这是一个样条曲线。

因此，您可以重构代码以使用Kinetic.Spline，而不是使用Kinetic.Shape手动绘制样条曲线。

原因是使用Kinetic.Shapes，您必须定义用于拖动样条曲线的自己的命中函数。对于样条线，该命中函数可能非常复杂。

以下是示例代码和演示：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>

为什么我不能画直线而不是直线？

1 个答案: