本文详解 Konva.js 使用 fillPatternImage 时图案偏移错位的根本原因（Konva.Image 尺寸与原始 Image 不一致），并提供动态同步 offset 的计算逻辑、完整可运行代码及关键注意事项。
本文详解 konva.js 使用 `fillpatternimage` 时图案偏移错位的根本原因（konva.image 尺寸与原始 image 不一致），并提供动态同步 offset 的计算逻辑、完整可运行代码及关键注意事项。
在 Konva.js 中，fillPatternImage 是实现纹理填充（如放大镜效果、自定义背景）的强大特性，但开发者常遇到图案“对不齐”“位置漂移”或“缩放后错位”的问题。根本原因在于：Konva.Image 实例的宽高（.width()/.height()）往往与底层原生 <img> 元素的 naturalWidth/naturalHeight 不同——尤其当 Konva.Image 被显式设置了尺寸（如适配舞台）时，其内部坐标系已发生缩放，而 fillPatternOffset 默认基于原始图像像素坐标计算，导致偏移值失效。
正确解法是：将鼠标（或目标）位置，按 Konva.Image 的缩放比例，映射回原始图像的自然像素坐标系中，再作为 fillPatternOffset 的输入值。核心公式如下：
// 获取 Konva.Image 相对于原始图像的缩放因子
const scaleX = konvaImage.width() / img.naturalWidth;
const scaleY = konvaImage.height() / img.naturalHeight;
// 鼠标在舞台上的位置 → 映射到 Konva.Image 内部坐标 → 再反推至原始图像像素坐标
const pos = stage.getPointerPosition();
const offsetX = (pos.x - konvaImage.x()) / scaleX; // 注意：若 Konva.Image 有 x/y 偏移需先减去
const offsetY = (pos.y - konvaImage.y()) / scaleY;
magnifier.fillPatternOffset({ x: offsetX, y: offsetY });
以下为完整、健壮的修复示例（含防错处理）：
<script src="https://unpkg.com/konva@9/konva.min.js"></script><style> #container { width: 100%; height: 600px; } </style><div id="container"></div>
<script>
const d = { width: 498, height: 665.1085141903172 };
const stage = new Konva.Stage({
container: 'container',
width: d.width,
height: d.height,
});
const layer = new Konva.Layer();
stage.add(layer);
const konvaImage = new Konva.Image({
width: d.width,
height: d.height,
x: 0,
y: 0
});
const img = new Image();
img.onload = () => {
layer.add(konvaImage);
konvaImage.image(img);
// 创建放大镜（圆形图案填充）
const magnifierLayer = new Konva.Layer();
stage.add(magnifierLayer);
const magnifier = new Konva.Circle({
x: 0,
y: 0,
radius: 100,
fillPatternImage: img,
fillPatternScale: { x: 2, y: 2 }, // 放大2倍
fillPatternRepeat: 'no-repeat',
stroke: 'black',
strokeWidth: 2,
opacity: 0.95
});
magnifierLayer.add(magnifier);
// 实时更新偏移：关键修复逻辑
stage.on('mousemove', (e) => {
const pos = stage.getPointerPosition();
if (!pos || !img.naturalWidth || !img.naturalHeight) return;
// 计算相对于 Konva.Image 左上角的局部坐标（支持 Konva.Image 有偏移的情况）
const localX = pos.x - konvaImage.x();
const localY = pos.y - konvaImage.y();
// 按 Konva.Image 缩放比例反推原始图像像素坐标
const offsetX = (localX * img.naturalWidth) / konvaImage.width();
const offsetY = (localY * img.naturalHeight) / konvaImage.height();
magnifier.position(pos);
magnifier.fillPatternOffset({ x: offsetX, y: offsetY });
});
// 隐藏默认光标
document.getElementById('container').style.cursor = 'none';
};
img.src = 'https://64.media.tumblr.com/tumblr_mapvkz4afv1qiehnjo1_640.jpg';
</script>
✅ 关键注意事项：
- 务必使用
img.naturalWidth/img.naturalHeight（原始尺寸），而非img.width/img.height（可能被 CSS 或 JS 修改）； - 若
konvaImage设置了x/y偏移，fillPatternOffset计算前必须先减去该偏移，否则图案中心会整体偏移； -
fillPatternScale影响图案显示大小，但不影响fillPatternOffset的单位——offset 始终以原始图像像素为单位； - 在
img.onload回调内初始化图形和事件监听，确保图像资源就绪后再操作； - 对于高 DPI 屏幕，如需像素级精准，可结合
window.devicePixelRatio进行微调（本例未涉及，属进阶场景）。
掌握这一映射逻辑后，无论是实现动态放大镜、滚动背景，还是复杂纹理蒙版，都能精准控制图案定位，彻底告别 fillPatternImage 的“幽灵偏移”问题。
