Question

我正在使用偏移选项创建Kinetic.Image。当我缓存图像对象和调用图层绘制方法时，Kinetic显示不正确的图像大小。

Kinetic.Shape.prototype._useBufferCanvas = function() {
    return false;
};

var stage = new Kinetic.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
  draggable: true
});
var layer = new Kinetic.Layer();
stage.add(layer);

var img = new Image();
img.onload = function () {
  var sticker = new Kinetic.Image({
    x: window.innerWidth / 2,
    y: window.innerHeight / 2,
    image: img,
    width: img.width,
    height: img.height,
    offset: {
      x: img.width / 2,
      y: img.height / 2
    },
    draggable: true
  });

  layer.add(sticker);
  stage.add(layer);

  sticker.cache();  
  layer.draw();

  sticker.filters([Kinetic.Filters.HSL]);
  sticker.hue(100);
  sticker.saturation(0);
  sticker.luminance(1);

  layer.draw();
};

img.src = 'http://img3.wikia.nocookie.net/__cb20120328033042/marioparty/es/images/7/7d/MP9_Select_Wario.png';

我尝试覆盖此解决方案的方法＆gt;＆gt; kineticjs group cache and layer draw is hiding kinetic arc shapes

但它仍无效。

Answer 1

我找到了解决方案！只使用Group对象而不是Image对象

var sticker = new Kinetic.Image({
  image: img,
  x: 0, y: 0,
  width: img.width, height: img.height
});

var group = new Kinetic.Group({
  x: window.innerWidth / 2, y: window.innerHeight / 2,
  width: img.width, height: img.height,
  offset: { x: img.width / 2, y: img.height / 2 },
  draggable: true
});

group.add(sticker);
layer.add(group);

使用偏移时，Kineticjs缓存显示不正确的形状大小

1 个答案: