Fix UI layer responsive scaling to perfectly match Canvas coordinates

2026-07-30 17:40:15 +05:30
parent bb7a23af4f
commit e00314644c
1 changed files with 13 additions and 2 deletions
@@ -430,14 +430,25 @@ export function UVEditor({ onClose, onSave, targetObject, loadedModel, sceneObje
                  style={{
                    left: `${(layer.x / CANVAS_SIZE) * 100}%`,
                    top: `${(layer.y / CANVAS_SIZE) * 100}%`,
+                    width: `${(iw / CANVAS_SIZE) * 100}%`,
+                    height: `${(ih / CANVAS_SIZE) * 100}%`,
                    transform: `translate(-50%,-50%) rotate(${layer.rotation}deg) scale(${layer.scaleX},${layer.scaleY})`,
                    zIndex: isSelected ? 4 : 2,
                    transition: 'transform 0.04s linear',
                  }}>
                  {layer.img && (
-                    <div style={{ width: iw, height: ih, overflow: 'hidden' }}>
+                    <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
                      <img src={layer.url} alt=""
-                        style={{ position: 'relative', left: -layer.cropL * layer.img.width, top: -layer.cropT * layer.img.height, width: layer.img.width, height: layer.img.height, display: 'block', pointerEvents: 'none', imageRendering: 'auto' }} />
+                        style={{ 
+                          position: 'relative', 
+                          left: `${-layer.cropL * 100}%`, 
+                          top: `${-layer.cropT * 100}%`, 
+                          width: `${(1 / (1 - layer.cropL - layer.cropR)) * 100}%`, 
+                          height: `${(1 / (1 - layer.cropT - layer.cropB)) * 100}%`, 
+                          display: 'block', 
+                          pointerEvents: 'none', 
+                          imageRendering: 'auto' 
+                        }} />
                    </div>
                  )}
                </div>