Question

我想绘制六边形并使用html5在其中显示图像。我已经试过了，但结果却没有得到图像。我只想使用kineticjs。

以下是代码：

function hexagon(){
    var stage = new Kinetic.Stage({
      container: "container"
    });

    var layer = new Kinetic.Layer();

    var hexagon = new Kinetic.RegularPolygon({
      x: 100,
      y: 100,
      sides: 6,
      radius: 100,
      fill: {image: "css/images/logo.png"},

      stroke: "royalblue",
      strokeWidth: 2
    });

    // add the shape to the layer
    layer.add(hexagon);
   // add the layer to the stage
    stage.add(layer);
}

Answer 1

fill获取图像对象。请尝试以下方法：

var layer = new Kinetic.Layer();

logo = new Image();
logo.src = "css/images/logo.png";

var hexagon = new Kinetic.RegularPolygon({
      x: 100,
      y: 100,
      sides: 6,
      radius: 100,
      fill: {image: logo},

      stroke: "royalblue",
      strokeWidth: 2
    });

    // add the shape to the layer
    layer.add(hexagon);
   // add the layer to the stage
    stage.add(layer);
}

Answer 2

KinectJS的作者写了一些非常棒的教程。在这一部分中，他用五角大楼和其他一些东西绘制了一幅图像。应该足以帮助你了。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-set-fill-with-kineticjs/

Answer 3

我有解决办法。

发布晚（迟到总比没有好）

应为：

fill: {image: "css/images/logo.png", offset: [0, 0]}

用html5和kineticjs显示六边形内的图像

3 个答案: