在 KineticJS 中绘制复杂的笔画（边框）答案

【问题标题】：drawing complex stroke (border) in KineticJS在 KineticJS 中绘制复杂的笔画（边框）
【发布时间】：2014-04-05 09:52:09
【问题描述】：

我有一个 KineticJS 图像。

我想在这张图片周围画一个边框。

为此，我使用 stroke。

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

1-我可以让这个边框带有圆角吗？喜欢这里jsbin
2-我可以给这个从内部到外部逐渐增加的边界透明度（比如说，从不透明度=0.9 到不透明度=0.3，线性减少）

我可以用 stroke 实现这些，还是需要画线等并用图像创建组？

【问题讨论】：

#2 听起来有点像阴影。在您的情况下，这会是一个很好的替代品吗？
@markE 阴影已固定不透明度。
很公平——在你的情况下不是可用的替代品:-)

标签： canvas border kineticjs

【解决方案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 对象手动绘制笔画时。

【讨论】：