Html 如何制作带剪辑的可拖动div

我正在尝试建立一个浏览器游戏，我的游戏地图是建立在有背景的正方形上。周围的布局很简单，有

、

、

和

，而

的大小是动态的，取决于屏幕大小。它包含地图，但这张地图肯定会比可见区域大。因此，玩家应该能够在这个裁剪区域内移动地图的可见区域。就像任何自上而下的RTS、TBS甚至RPG一样。我认为拖动地图是最简单的方法，但也可以使用箭头键将地图移动一个正方形

---

我知道如何编写代码（Java、JavaScript、Typescript），但对于CSS，我缺乏一些经验，不知道如何实现这一点，甚至不知道用CSS术语搜索什么，除了

clip path

可能是一个选项。有人能给我指出正确的方向，或者提供一些代码片段吗？

您可以使用CSS背景属性，例如

背景图像

、

背景大小

和

背景位置

，将地图图像添加到元素中。然后使用一些JavaScript魔术，根据光标的位置更改

背景位置

，并确保不会将地图拖出视图

var-map=document.getElementById（“map”）；
var backgroundSize=window.getComputedStyle（map.getPropertyValue（“背景大小”）.split（“”）；
var mapWidth=map.offsetWidth；
var MAPHEIGH=map.OFFSETHEIGH；
//使DIV元素成为draggagle：
排水管（map）；
功能牵引装置（elmnt）{
变量pos1=0，pos2=0，pos3=0，pos4=0；
elmnt.onmousedown=dragMouseDown；
功能下拉列表（e）{
e=e | | window.event；
e、 预防默认值（）；
//在启动时获取鼠标光标位置：
pos3=e.clientX；
pos4=e.clientY；
document.onmouseup=关闭DrageElement；
//每当光标移动时调用函数：
document.onmousemove=elementDrag；
}
功能元素拖动（e）{
e=e | | window.event；
e、 预防默认值（）；
var backgroundPos=window.getComputedStyle（elmnt）.getPropertyValue（“背景位置”）.split（“”）；
//计算新光标位置：
pos1=pos3-e.clientX；
pos2=pos4-e.clientY；
pos3=e.clientX；
pos4=e.clientY；
//设置元素的新位置：
var x=背景位置[0]。切片（0，-2）-pos1；
变量y=背景位置[1]。切片（0，-2）-pos2；
如果（x>（mapWidth-backgroundSize[0]。切片（0，-2））&&y>（mapHeight-backgroundSize[1]。切片（0，-2））&&x<0&&y<0）{
elmnt.style.backgroundPosition=x+'px'+y+'px'；
}
}
函数closeDrageElement（）{
/*释放鼠标按钮时停止移动：*/
document.onmouseup=null；
document.onmousemove=null；
}
}

#地图{
宽度：400px；
高度：300px；
边框：3px实心#444；
背景图像：url（'https://upload.wikimedia.org/wikipedia/commons/3/38/Europe_topography_map_en.png');
背景重复：无重复；
背景位置：-250px-480px；
背景尺寸：1500px 1200px；
框大小：边框框；
}

---

不确定是否要剪裁。但也许这能帮到你？谢谢你的例子，它给了我一些想法，似乎我在这个问题上不够清楚。我没有地图的图像，但实际的瓷砖都有背景图像。将这些放置在矩阵中的瓷砖组合在一起构成地图。因此，我无法使用背景位置，但我将尝试使用负边距。添加了一个替代解决方案，可以让您使用瓷砖矩阵。谢谢。你认为负值或负值的绝对定位有什么区别吗？后者是我目前正在实现的。对我来说，优势在于当前将地图的位置设置为相对位置，因此单位可以绝对定位。我认为这不会有多大区别。如果这适用于您的特定设置，请尝试：