Question

我正在寻找一种可以调整动力学形状的逻辑。我得到了调整图像大小的示例，但是如果我将相同的逻辑应用于我的自定义形状的旋转仪表。形状的大小调整在某种程度上起作用但不完整。任何人都可以帮忙解决这个问题。

Answer 1

以下是使用“抓取器”调整圆形对象大小的方法

方法

在您的guage中添加.resize（scaleFactor）方法。
调用myGuage.resize时，请将您的guage调整为scaleFactor。
创建“抓取器”组
向位于您的测量仪右侧的组添加一个圆圈（这是实际的抓取器）
在连接抓取器圈和指示器的组中添加一行。
将dragmove事件处理程序添加到抓取器圈
当抓取器圈移动时，通过调用myGuage.resize（scaleFactor）来调整大小。
当抓取器圈移动时，重新连接抓取器连接线。

这是代码和小提琴：http://jsfiddle.net/m1erickson/cLmAZ/

<!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.0.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

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


    var draggerOffset=40;
    var myGuageX=200;
    var myGuageY=200;
    var myGuageRadius=50;


    var dragger=new Kinetic.Group({

    });
    layer.add(dragger);

    var dragLine=new Kinetic.Line({
        points: [myGuageX,myGuageY, 200+draggerOffset+myGuageRadius,200],
        stroke: 'green',
        strokeWidth: 2,
        lineJoin: 'round',
        dashArray: [5,2]    
    });
    dragger.add(dragLine);

    var dragCircle=new Kinetic.Circle({
        x: myGuageX+draggerOffset+myGuageRadius,
        y: myGuageY,
        radius: 10,
        fill: 'skyblue',
        stroke: 'lightgray',
        strokeWidth: 3,
        draggable:true,
        dragBoundFunc: function(pos) {
            return { x: pos.x, y: this.getAbsolutePosition().y }
        }
    });
    dragCircle.on("dragmove",function(){
        var x1=this.getX();
        var y1=this.getY();
        var x2=myGuage.getX();
        var y2=myGuage.getY();
        var dx=x1-x2;
        var dy=y1-y2;
        var r=Math.sqrt(dx*dx+dy*dy)-draggerOffset;
        r=Math.max(5,r);
        myGuage.resize(r);
        dragLine.setPoints([myGuageX,myGuageY, x1,y1]);
    });
    dragger.add(dragCircle);


    // this circle represents your guage
    var myGuage = new Kinetic.Circle({
        x: myGuageX,
        y: myGuageY,
        radius: 50,
        fill: 'gold',
        stroke: 'black',
        strokeWidth: 3
    });
    myGuage.resize=function(scaleFactor){
        // Here is where you would scale your guage by scaleFactor
        // In this demo, I just resize this gold circle
        this.setRadius(scaleFactor);
    };
    layer.add(myGuage);

    layer.draw();

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

</script>       
</head>

<body>
    <p>Drag the blue "grabber" to resize the gold "guage"</p>
    <div id="container"></div>
</body>
</html>

使用Kineticjs调整自定义形状的大小

1 个答案: