如何使用vh html，css，js重新计算div内标记的位置

Question

I trying to create a map framework for some games and i have a problem with recalc position of marker. Look url to test, with wheel you can resize div with image but the dot red not come back to own position. Sorry but im new on this y trying to learn more about js and css. Thanks

 $('.map-live').css('width', "928px"); $('.map-live').css('height', "928px"); $('.map-live').css('background-size', "100%"); $('.map-live').bind('mousewheel DOMMouseScroll', function(event) { var divSize = $('.map-live').css('width'); console.log(divSize); divSize = divSize.replace('px', '') divSize = parseInt(divSize); console.log("oldSize: " + divSize); var delta_px = event.originalEvent.wheelDelta > 0 ? (divSize + (divSize * 0.15)) : (divSize - (divSize * 0.15)); console.log("NewSize: " + delta_px); $(this).css('width', delta_px + "px"); $(this).css('height', delta_px + "px"); $(this).css('background-size', "100%"); UpdatePoints(); }); $(function() { $("#map-live").draggable(); }); document.getElementById('map-live').addEventListener('click', printPosition) function getPosition(e) { var rect = e.target.getBoundingClientRect(); var x = e.clientX - rect.left; var y = e.clientY - rect.top; return { x, y } } function printPosition(e) { var position = getPosition(e); console.log('X: ' + position.x + ' Y: ' + position.y); var divX = parseInt($('.map-live').css('width').replace('px', '')); var divY = parseInt($('.map-live').css('height').replace('px', '')); var vhX = (position.x / divX) * 100; var vhY = (position.y / divY) * 100; console.log('vhX: ' + vhX + ' vhY: ' + vhY); } function UpdatePoints() { $('.point').css('top', '2.477565353101834vh'); $('.point').css('left', '2.477565353101834vh'); $('.point').css('position', 'absolute'); }

 body { margin: 0; overflow: hidden; } .map-live { position: absolute; left: 10px; z-index: 9; background-image: url(https://i.ibb.co/d2y5G1y/map.jpg); width: 222px; height: 222px; transition: all 0.2s linear; } .point { position: absolute; left: 2.477565353101834vh; top: 2.477565353101834vh; width: 10px; height: 10px; background-color: red; border-radius: 50%; }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="map-live ui-widget-content" id="map-live"> <div class="point"></div> </div>

jsfiddle.net/f84mto52

Answer 1

有人可以纠正我，但我相信您使用position: absolute是使<div class="point"></div>保持原位的原因。

Answer 2

Your UpdatePoints is setting always the same position in the div. With 'vh' you are calculating and absolute position proportional to viewport, no to parent container.

So, you are zooming the background image but the position (x, y) will be always be (x, y), positions are not zoomed. You need to recalculate which is the new position.

So you need to calculate new position.

function UpdatePoints(){
  var divW = parseInt($('.map-live').css('width').replace('px',''));
  var divH = parseInt($('.map-live').css('height').replace('px',''));
  var topPosition = (2.477565353101834 / 928) * divH;
  var leftPosition = (2.477565353101834 / 928) * divW;
  $('.point').css('top', topPosition+'vh');
  $('.point').css('left', leftPosition+'vh');
  $('.point').css('position', 'absolute');
}

Also, instead using 'vh' I recommend to calculate the px position instead. I have added the already calculated delta_px parameter to UpdatePoints function:

<style>
.point {
    position: absolute;
    left: 22.99180647678502px;
    top: 22.99180647678502px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
}
</style>

<script>
function UpdatePoints(delta_px){
  var position = (delta_px/100)*2.477565353101834;
  $('.point').css('top', position+'px');
  $('.point').css('left', position+'px');
  $('.point').css('position', 'absolute');
}
</script>

Also, here we are calculating the top-left position of the .point element, not the position for the center. As it is a circle, it work fine, but if you use any other shape the position translation should be calculated from its center.

I recommend to do some research about how to translate elements. You can start here:

• Calculating relative position of points when zoomed in and enlarged by a rectangle !
• Zoom in on a point (using scale and translate) !
• How do I effectively calculate zoom scale? !