Question

我正在尝试用kinetic.js做一个旋钮我设法轮换并从中获取价值，但我无法思考每当调用旋钮上的新事件时保持先前位置的逻辑

以下是示例

这是我的dragBoundFunc，

dragBoundFunc: function(pos) {
    knobLine.setRotationDeg( pos.x );
    return {
        x: this.getAbsolutePosition().x,
        y: this.getAbsolutePosition().y,            
    }             
}

我已经尝试了

knobLine.setRotationDeg( knobLine.rotation() + pos.x );

然而，它似乎首先工作但增量值不是恒定的

请帮忙！谢谢！

Answer 1

这是使用三角法的一种方法：

听取旋钮圈中的点击次数。
计算咔嗒声与旋钮中心点的角度。
使用三角函数重置旋钮线端点。

示例代码和演示：http://jsfiddle.net/m1erickson/h1vpupkd/

<!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.1.0.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 knob=new Kinetic.Circle({
        x:100,
        y:100,
        radius:18,
        stroke:'red',
    });
    knob.on('click',function(){
        var cx=this.x();
        var cy=this.y();
        var radius=this.radius();
        var pos=stage.getPointerPosition();
        var mouseX=parseInt(pos.x);
        var mouseY=parseInt(pos.y);
        var dx=mouseX-cx;
        var dy=mouseY-cy;
        var angle=Math.atan2(dy,dx);
        var lineX=cx+radius*Math.cos(angle);
        var lineY=cy+radius*Math.sin(angle);
        line.points([cx,cy,lineX,lineY]);
        layer.draw();
    });
    layer.add(knob);

    var line=new Kinetic.Line({
        points:[100,100,100,85],
        stroke:"red"
    });
    layer.add(line);

    layer.draw();


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

</script>       
</head>
<body>
    <h4>Click in knob to reset line.</h4>
    <div id="container"></div>
</body>
</html>

Answer 2

使用Math.atan2(y,x)获取弧度值，并将弧度转换为radian/Math.PI*180度。

dragBoundFunc: function(pos) {
    var theta = Math.atan2(pos.y,pos.x);
    knobLine.rotation(theta/Math.PI*180+45);
    return {
        x: this.getAbsolutePosition().x,
        y: this.getAbsolutePosition().y,
    }
}

试图用kinetic.js做一个旋钮

2 个答案: