Html 使用kineticjs动态调整绘制的圆的大小
如何调整kineticjs中动态绘制的圆的大小？Html 使用kineticjs动态调整绘制的圆的大小,html,html5-canvas,kineticjs,Html,Html5 Canvas,Kineticjs,如何调整kineticjs中动态绘制的圆的大小？ 我正在考虑使用锚点，但无法使其发挥作用。如果您想知道如何让用户从头开始创建动态大小的圆圈，您可以使用钩子插入Dynamic容器的mousemove事件： 如果您询问哪种动力学方法允许您调整现有圆的大小： myCircle.setRadius(newRadius); 您可以使用一个可拖动的锚，如下所示： <!DOCTYPE html> <html> <head> <meta charset
我正在考虑使用锚点，但无法使其发挥作用。如果您想知道如何让用户从头开始创建动态大小的圆圈，您可以使用钩子插入Dynamic容器的mousemove事件： 如果您询问哪种动力学方法允许您调整现有圆的大小：
myCircle.setRadius(newRadius);
<!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>
原型
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：400px；
高度：400px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：400，
身高：400
});
var layer=新的动能层（）；
阶段。添加（层）；
var DRAGGER OFFSET=40；
var myGuageX=200；
var myGuageY=200；
myGuageRadius变种=50；
var dragger=新的动力学组({
});
层。添加（拖动器）；
var dragLine=新的动力线({
点数：[myGuageX，myGuageY，200+draggerOffset+myGuageRadius，200]，
笔划：“绿色”，
冲程宽度：2，
lineJoin:'圆形'，
dashArray:[5,2]
});
拖缆机。添加（拖缆机）；
var dragCircle=新的动力学圆({
x:myGuageX+draggerOffset+myGuageRadius，
y:myGuageY，
半径：10，
填充：“天蓝色”，
笔划：“浅灰色”，
冲程宽度：3，
真的，
dragBoundFunc:函数（位置）{
返回{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=数学sqrt（dx*dx+dy*dy）-DRAGGER偏移量；
r=数学最大值（5，r）；
myGuage.resize（r）；
拖缆。设定点（[myGuageX，myGuageY，x1，y1]）；
});
dragger.add（dragCircle）；
//这个圆圈代表你的语言
var myGuage=新的动力学圆({
x:myGuageX，
y:myGuageY，
半径：50，
填写：'黄金'，
笔画：“黑色”，
冲程宽度：3
});
myGuage.resize=函数（scaleFactor）{
//在这里，您可以通过scaleFactor缩放您的语言
//在这个演示中，我只是调整这个金色圆圈的大小
这个.setRadius（scaleFactor）；
};
图层。添加（myGuage）；
layer.draw（）；
}); // end$（函数（）{}）；
拖动蓝色“抓取器”以调整金色“量规”的大小