Question

我正在尝试沿着弧线添加文字，然后我阅读了tutorial。有如下功能。我不太明白Layer和Context之间的区别以及我应该使用哪一个。是Layer Canvas加Context吗？我在图层上创建了一个与tutorial不同的弧。在drawTextAlongArc中，如何使用Layer在弧上绘制文本？或者我必须使用Context来完成这项工作？它现在不工作了。但如果它有效，那么弧会在图层上绘制吗？

function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
    var len = str.length, s;
    context.save();
    context.translate(centerX, centerY);
    context.rotate(-1 * angle / 2);
    context.rotate(-1 * (angle / len) / 2);
    for(var n = 0; n < len; n++) {
      context.rotate(angle / len);
      context.save();
      context.translate(0, -1 * radius);
      s = str[n];
      context.fillText(s, 0, 0);
      context.restore();
    }
    context.restore();
  }

var stage = new Kinetic.Stage({
    container: "mainContainer",
    width: $("#mainContainer").width(),
    height: $("#mainContainer").height()
});
var layer = new Kinetic.Layer();

var kineticGroup = new Kinetic.Group({
        x: 300,
        y: 120,
        draggable: true,
        fill: 'black',
        draggable: true
    });
var arc = new Kinetic.Arc({
        innerRadius: 90,
        outerRadius: 92,
        stroke: 'black',
        strokeWidth: 1,
        angle: 180,
        rotationDeg: 180
    });

var canvas = layer.getCanvas(),
    context = canvas.getContext('2d'),
    centerX = canvas.width / 2,
    centerY = canvas.height - 30;
    drawTextAlongArc(context, 'Text along arc path', centerX, centerY, 92, 180);
    context.stroke();

kineticGroup.add(arc);    
layer.add(kineticGroup);
stage.add(layer);
stage.draw();

沿着圆弧在图层上绘制文本

0 个答案: