5

我目前正在尝试使用 KineticJS 画布框架绘制弧线。我遇到的问题是这些弧线并不像要求的那样“完美”圆形。

他们被抽出来如下：

var redArc = new Kinetic.Shape({
    drawFunc: function (canvas) {
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI / 2, true);    // Arc of 270°
        canvas.fillStroke(this);
    },
    x: x,
    y: y,
    stroke: 'rgb(255,0,0)',
    strokeWidth: 20,
    offset: [x, y]
});

我知道这可能是个问题，因为没有在基于像素的介质上渲染近乎完美的圆形而不在笔划上使用抗锯齿

如果这个问题可以通过矢量图形渲染或是否有替代解决方案来解决，我一直在徘徊？

我已经包含了一个 JSFiddle 来概述这个问题，圆圈正在围绕它们的轴旋转。这种效果在弧线旋转时显得“摆动”时更加明显。

JSFiddle：http: //jsfiddle.net/EHDFV/

4

1 回答 1

0

摇晃会不会是一种视错觉。

在动画周围添加了一个静止的黑色圆圈。

var blackCircle = new Kinetic.Shape({
    drawFunc: function (canvas) {
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, (r + 10), 0, 2 * Math.PI, true);
        canvas.fillStroke(this);
    },
    x: x,
    y: y,
    stroke: 'rgb(0,0,0)',
    strokeWidth: 1,
    offset: [x, y]
});

您的摆动是否在任何时候穿过黑色圆圈或留下空隙？

新小提琴http://jsfiddle.net/EHDFV/1/

于 2013-03-19T15:12:06.717 回答