Konva js fillPatternImage 问题

Question

我在使用 fillPatternImage 功能时遇到了

小

问题

这是示例工作台：https://codepen.io/adrienreveleau/pen/xxMNJZX
这是失败案例：https://jsbin.com/dusocukeya/edit?js,output

尽管进行了深入研究并多次尝试调整偏移参数，但我仍未成功找到解决方案！

你能帮助我吗？

Answer 1

您的

konvaImage

与原始图像的尺寸不同。因此，在计算模式偏移时需要考虑到这一点。

   let d = { width: 498, height: 665.1085141903172 }

let stage = new Konva.Stage({
  container: 'container',
  width: d.width,
  height: d.height,
});

let layer = new Konva.Layer();
stage.add(layer);

 let konvaImage = new Konva.Image({
width: d.width,
height: d.height,
  });

let img = new Image();
img.onload = function () {
  // Ajouter l'image à la couche
  layer.add(konvaImage);
   konvaImage.image(img);
};

img.src = 'https://64.media.tumblr.com/tumblr_mapvkz4afv1qiehnjo1_640.jpg';

let magnifierLayer = new Konva.Layer();
stage.add(magnifierLayer);
let zoom = [4, 2, 1]

let magnifier = new Konva.Circle({
  radius: 50 * 2, 
  fillPatternImage: img,
  fillPatternScale: { x: zoom[1], y: zoom[1] }, 
  fillPatternOffset: { x: 100, y: 100 },
  stroke: 'black',
  fillPatternRepeat: 'no-repeat',
  opacity: 1,
  strokeWidth: 2,
});
magnifierLayer.add(magnifier);

stage.on('mousemove', function (e) {
  const scaleX = konvaImage.width() / d.width;
  const scaleY = konvaImage.height() / d.height;
  let pos = stage.getPointerPosition();
  magnifier.position(pos);
  magnifier.fillPatternOffset({ x: img.width * (pos.x / konvaImage.width()), y: img.height * (pos.y / konvaImage.height())});
});

document.getElementById('container').style.cursor = 'none';

 <script src="https://unpkg.com/konva@9/konva.min.js"></script>
<div id="container">