Question

您好我想制作一个加载动画，其中圆环图越来越大。我需要使用自定义形状来执行此操作，因为我需要中间的孔用于其他动画。到目前为止我得到的是：

var stage = new Kinetic.Stage（{       容器：＆＃39;装载机＆＃39;，       宽度：600，       身高：200}）;

var layer = new Kinetic.Layer（）;

var circle = new Kinetic.Circle（{       x：stage.getWidth（）/ 2 + 200，       y：stage.getHeight（）/ 2，       半径：70，       填充：＆＃39;红色＆＃39; }）;

var x = stage.width / 2; var y = stage.height / 2; var radius = 75;   var startAngle = 1.1 * Math.PI; var endAngle = 1.9 * Math.PI; VAR   counterClockwise = false;

var arc = new Kinetic.Shape（{
sceneFunc: function(context) {
    context.beginPath();
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.closePath();
    // KineticJS specific context method
    context.fillStrokeShape(this);
},
fill: 'green',
stroke: 'red',
strokeWidth: 4 });
//将形状添加到图层

layer.add（ARC）;

//将图层添加到舞台stage.add（图层）;

如果某个身体可以帮助我会很棒

这是我的小提琴：http://jsfiddle.net/FabuBaracus/D9j3S/

Answer 1

您可以使用Kinetic.Shape绘制可调弧。

演示：http://jsfiddle.net/m1erickson/RZRVx/

首先创建一个弧：

var arc = new Kinetic.Shape({
  sceneFunc: function(context) {
    context.beginPath();
    context.beginPath();
    context.arc(this.cx,this.cy,this.radius,-PI2/4,PI2*this.arcPercent/100-PI2/4);
    // KineticJS specific context method
    context.fillStrokeShape(this);
  },
  stroke: 'green',
  strokeWidth:25
});

然后在该弧上添加一些属性，用于定义弧的大小：

arc.cx=100;
arc.cy=100;
arc.radius=75;
arc.arcPercent=33;  // percent is 0-100

最后创建一个可用于调整弧的扫描的函数

function setArcPercent(percent){
    arc.arcPercent=percent;
    layer.draw();
}

Kineticjs用Kinetic.Shape绘制弧线

1 个答案: