Question

我希望我的图像被剪切在中间，并能够在被遮盖的情况下左右左右移动，以适合整个屏幕用户应该只能看到图像的特定部分，并且能够像下面的链接一样四处移动，但他的视点是适合屏幕透视的小矩形到目前为止，我所得到的只是图像的左上方

以防万一，我不清楚我要达到什么效果，但是用户看不到比方格大的移动 https://www.w3schools.com/howto/howto_js_image_zoom.asp

如果您碰巧发现了这张票，我将很快关闭这张票。我相信我在这里尽可能的清楚 How to clip your image freely

<style>
img {
    background-position: cover;
    position: absolute;
    clip:rect(0px,500px,500px,0px);
}
.image1 { 
background: url(images/bg.jpg) no-repeat center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>

<div class='clipper-div'>
   <img class='image1' src='office.gif'/>  
</div>

Answer 1

您要查找的类型是插图裁剪：

clip-path: inset(top bottom left right);

您可以收听鼠标移动事件以更新剪辑。在下面的示例中，我使用了CSS custom properties，我将其添加到了clipper元素样式定义中。

这些自定义属性用作裁剪定义的CSS变量。

// Globals variables (we could store them into an object,
// which would be a cleaner way
var clipperDiv = document.getElementById("clipper-div");
var hoveringClippedImg = document.getElementById("hovering-clipped");
var imgBoundingRect = hoveringClippedImg.getBoundingClientRect();
var clippingSize = 40;

// Surrouding DIV element mouse move event callback
clipperDiv.onmousemove = clipHoveredArea;

// Update image clipping

function clipHoveredArea(e) {

  // First step: getting clipping coordinates from mouse position
  var pos = getMousePos(e);
  var top = (pos.y - clippingSize / 2);
  var bottom = (imgBoundingRect.height - pos.y - (clippingSize / 2));
  var left = (pos.x - clippingSize / 2);
  var right = (imgBoundingRect.width - pos.x - clippingSize / 2);

  // Second step: CSS custom properties
  hoveringClippedImg.style.setProperty("--top", top + "px");
  hoveringClippedImg.style.setProperty("--bottom", bottom + "px");
  hoveringClippedImg.style.setProperty("--left", left + "px");
  hoveringClippedImg.style.setProperty("--right", right + "px");

};

// Get mouse position relative to an element
// Source: //stackoverflow.com/a/42111623/4375327

function getMousePos(e) {
  // e = Mouse click event.
  var rect = e.currentTarget.getBoundingClientRect();
  var x = e.clientX - Math.round(rect.left);
  var y = e.clientY - Math.round(rect.top);
  return {
    x: x,
    y: y
  };
}

#clipper-div {
  border: 2px solid black;
  width: 200px;
  height: 200px;
}

#hovering-clipped {
  padding: 0;
  margin: 0;
  width: 200px;
  height: 200px;
  clip-path: inset(var(--top) var(--right) var(--bottom) var(--left));
  --top: 0px;
  --right: 0px;
  --bottom: 0px;
  --left: 0px;
  cursor: crosshair;
}

<div id='clipper-div'>
  <img id="hovering-clipped"
       src="//placehold.it/200x200/d0d8f8/000000" />
</div>

注意：我使用了Clippy。它是设计所需剪辑的便捷工具。

图像剪辑中心

1 个答案: