Question

我有一张KineticJS图像。

我想在此图片周围绘制边框。

为此，我使用描边。

var x = new Kinetic.Image({
    image: img,
    stroke: 'Red',
    strokeWidth: 5
}

1 - 我可以使用圆角这个边框吗？像这里jsbin
2 - 我可以给这个从内部到外部逐渐增加的边界透明度（假设，从不透明度= 0.9到不透明度= 0.3，线性减少）

我可以通过描边来实现这些目标吗？或者我是否需要绘图线等并使用图像创建组？

Answer 1

1）你可以用图像绘制带有笔划和圆角的透明Kinetic.Rect。

    var rect = new Kinetic.Rect({
       x : image.x(),
       y : image.y(),
       width :image.width(),
       height : image.height(),
       stroke : 'blue',
       storkeWidth : 5,
       cornerRadius : 10
    });

<强> Demo

2）没有简单的方法可以做到这一点。仅当您使用Kinetic.Line对象手动绘制笔划时才会使用。

在KineticJS中绘制复杂的笔划（边界）

1 个答案: