Изменение размера пользовательской формы с помощью Kineticjs

Я ищу логику, где я могу изменить размер кинетической формы. У меня были примеры для изменения размера изображения, но если я применил ту же логику к пользовательской форме, то в моем случае - счетчик Rotary. Изменение размера фигуры работает в некоторой степени, но не полностью. Может ли кто-нибудь помочь в этом.Изменение размера пользовательской формы с помощью Kineticjs

источник

2013-09-17 user2786085

код присутствует на: http://jsfiddle.net/7JKRf/ – user2786085

Вашей скрипка почти 1000 строк. Пожалуйста, объясните свой вопрос более подробно и узрите скрипку в области вашего кода, в котором вам нужна помощь. – markE

Пользовательская форма, которую я создаю с помощью кинетического js, - это вращающийся метр. Чтобы изменить размер этой формы, я добавляю привязки к форме. Теперь моя первая проблема - поскольку форма вращающегося измерителя является круглой, я хочу, чтобы анкеры, добавленные к круглой форме, были соединены пунктирной линией, чтобы определить границу для фигуры. Другая проблема заключается в том, что я не могу правильно масштабировать изображение с помощью якорей. Изображение перемещает область якорей. – user2786085

Вот как изменить размер округлый объект с «захвата»

Метод

Добавить метод .resize (scaleFactor) к вашему Guage.
Когда вызывается myGuage.resize, измените размер вашего объекта на scaleFactor.
Создать «перетаскиванием» группы
Добавить круг в группе, расположенной справа от Guage (это фактическая граббер)
Добавить строку в группу, которая соединяет граббер-круг с ваш образ.
Добавить обработчик события dragmove в граббер-круг
Когда кружок grabber-circle перемещается, измените размер guage, вызвав 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>

источник

2013-09-18 21:22:03 markE

Изменение размера пользовательской формы с помощью Kineticjs

ответ

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