2

将 KineticJS 从 v4.0.5 更新到 v4.3.1 后，我无法再使用此方法用图像填充多边形：

polygon.setFill({
    image: imageObj
});

我最终得到黑色背景。还有其他方法吗？

尝试：我试过poly.setFillPattern(image)

jsfiddle：http: //jsfiddle.net/eeSSN/

4

1 回答 1

1
  • 删除 Kinetic.Polygon 中的“填充”配置。
  • 您创建了 thingImage 但从未使用过它。
  • 您可以使用“setFillPatternImage”
  • 您必须在 iamge.onload 中调用 stage.draw

代码：

var stage = new Kinetic.Stage({
   container: 'canvas',
   width: 600,
   height: 600
});
var layer = new Kinetic.Layer();
// Outline
var poly = new Kinetic.Polygon({
    points: [0, 0, 400, 0, 400, 400, 0, 400],
    //fill: 'red',
    stroke: '#000',
    strokeWidth: 0,
    name: 'poly',
    draggable: false
});
var imageObj = new Image();
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
    poly.setFillPatternImage(imageObj);
    stage.draw();
}

layer.add(poly);
stage.add(layer);

http://jsfiddle.net/lavrton/eeSSN/1/

于 2013-01-27T11:42:44.367 回答