KonvaJs：带角渐变的环

Question

我在我的项目中使用KonvaJS。我需要用角度渐变制作环形或弧线。在这个fiddle 中完成的方式。我使用了像这样在Konva.Arc 中使用的颜色

fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 35,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 55,
fillRadialGradientColorStops: [0, '#0F0', 1.0, '#0FF', 0, '#F00', 1.0, '#FF0', 0, '#F0F', 1.0, '#00F']

但我不知道我错过了什么。我不能给它同样的外观。这是plunkr。在 plunkr 中，我使用了自定义形状。使用自定义形状，我可以使用角度渐变绘制圆环，但我不想使用自定义形状，因为如果我使用自定义形状，那么我还必须处理其他东西，因为 Konva 已经有两个内置形状 Konva.Ring 和 Konva.Arc。所以最好使用它们。

Answer 1

Konva.Image 可以使用 html5 画布作为其图像源。

这意味着您可以：

1. 创建一个包含弧形渐变的内存画布（使用与your linked fiddle 相同的代码）。
2. 使用 #1 中的画布作为图像源创建 Konva.Image。

这是示例代码和演示：

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

// create arc gradient on an in-memory canvas
var r=120;
var lw=30;
var c=drawMultiRadiantCircle(r,lw,['#0F0','#0FF','#F00','#FF0','#F0F']);

// use the in-memory canvas as an image source for Konva.Image
var img=new Konva.Image({x:0,y:0,image:c,width:c.width,height:c.height,draggable:true});
layer.add(img);
layer.draw();


// helper function: return a new canvas containing an arc-gradient
function drawMultiRadiantCircle(r, linewidth, radientColors) {
  var xc=r+linewidth/2;
  var yc=r+linewidth/2;
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width=r*2+linewidth;
  canvas.height=r*2+linewidth;
  var partLength = (2 * Math.PI) / radientColors.length;
  var start = 0;
  var gradient = null;
  var startColor = null;
  var endColor = null;
  //
  for (var i = 0; i < radientColors.length; i++) {
    startColor = radientColors[i];
    endColor = radientColors[(i + 1) % radientColors.length];
    // x start / end of the next arc to draw
    var xStart = xc + Math.cos(start) * r;
    var xEnd = xc + Math.cos(start + partLength) * r;
    // y start / end of the next arc to draw
    var yStart = yc + Math.sin(start) * r;
    var yEnd = yc + Math.sin(start + partLength) * r;
    gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
    gradient.addColorStop(0, startColor);
    gradient.addColorStop(1.0, endColor);
    //
    ctx.beginPath();
    ctx.strokeStyle = gradient;
    ctx.arc(xc, yc, r, start, start + partLength);
    ctx.lineWidth = linewidth;
    ctx.stroke();
    ctx.closePath();
    start += partLength;
  }
  return(canvas);
}

body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}

<script src="https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.min.js"></script>
<h4>A draggable Konva.Image created from an html5 canvas.</h4>
<div id="container"></div>