mohanki/titan_react_node_sqllite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix UI layer responsive scaling to perfectly match Canvas coordinates

Browse Source
This commit is contained in:
AI Bot
2026-07-30 17:40:15 +05:30
parent bb7a23af4f
commit e00314644c
1 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/UVEditor.tsx
+13 -2
View File
@@ -430,14 +430,25 @@ export function UVEditor({ onClose, onSave, targetObject, loadedModel, sceneObje
style={{ style={{
left: `${(layer.x / CANVAS_SIZE) * 100}%`, left: `${(layer.x / CANVAS_SIZE) * 100}%`,
top: `${(layer.y / 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})`, transform: `translate(-50%,-50%) rotate(${layer.rotation}deg) scale(${layer.scaleX},${layer.scaleY})`,
zIndex: isSelected ? 4 : 2, zIndex: isSelected ? 4 : 2,
transition: 'transform 0.04s linear', transition: 'transform 0.04s linear',
}}> }}>
{layer.img && ( {layer.img && (
<div style={{ width: iw, height: ih, overflow: 'hidden' }}> <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
<img src={layer.url} alt="" <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>
)} )}
</div> </div>