変換機能を使用するにはtranslate3d

Question

Javascriptで関数を書いて、画像をコンテナ内にドラッグ可能にしました。画像が拡大されたとしても、画像が消えずに画面全体にドラッグできます。私の関数は、style.topとstyle.leftの使用に頼っています。 translate3dを使用するとパフォーマンスが向上するかもしれないと聞いたことがあります。これは面白いことですが、スライダを使った画像のスケール関数をscale3dに変更してスケーリングがはっきりとスムーズになったことは間違いありません。だから誰も私がtranslate3dを使用するように書いたこの関数を変換するのを助けることができますか？私は試してみましたが失敗し続けました。多くのおかげで：

編集：私は、IMGは、画像そのものである一方、imgRectが（それはdivの中に含まれているimgタグにあります）、親のdivであることに注意してくださいjsfiddle https://jsfiddle.net/bx4073tr/

を設置しました。

function makeImageDraggable(event) { 
    // Make an image draggable but within bounds of container 
    let overflow_vertical = false; 
    let overflow_horizontal = false; 
    // bounding rectangles to hold image and imageContainer 
    let imgRect = img.getBoundingClientRect(); 
    let imgContainerRect = imageContainer.getBoundingClientRect(); 
    // find out if image overflows it's container div 
    // check for vertical overflow, getBoundingClientRect().height will get the real height after the image is scaled 
    if (imgRect.height > imageContainer.offsetHeight) { 
     overflow_vertical = true; 
    } 
    // check for horizontal overflow 
    if (imgRect.width > imageContainer.offsetWidth) { 
     overflow_horizontal = true; 
    } 
    // if there is no overflow, either horizontal or vertical, then do absolutely nothing 
    if (!overflow_horizontal && !overflow_vertical) { 
     // nothing to do 
    } else { 
     // otherwise make image draggable 
     event = event || window.event; 
     // get initial mouse position 
     let startX = event.clientX; 
     let startY = event.clientY; 

     // get position of image to be dragged 
     let offsetX = pixelToFloat(img.style.left); 
     let offsetY = pixelToFloat(img.style.top); 

     // add onmousemove event now we are sure user has initiated a mousedown event 
     window.onmousemove = function(mousemove_event) { 
      if (mousemove_event == null) { 
       mousemove_event = window.event; 
      } 
      // calculate bounds so that image does not go off the page 
      // if there is an overflow, the image will be bigger than the container 
      // so we need to find the maximum distance we can go upwards, downwards and sideways 
      // using img.getBoundingClientRect, we can get the width of the scaled image, we also get the width of the container 
      // divide it by 2 so we can move the same number of pixels in either direction 
      // max right and left 
      let max_right = -1 * (((imgRect.right - imgRect.left) - (imgContainerRect.right - imgContainerRect.left))/2); 
      // should be a positive number 
      let max_left = -1 * (max_right); 
      // max bottom and top 
      let max_bottom = -1 * (((imgRect.bottom - imgRect.top) - (imgContainerRect.bottom - imgContainerRect.top))/2); 
      // should be a positive number 
      let max_top = -1 * (max_bottom); 
      // Dragging image left and right 
      if (!overflow_horizontal) { 
      } else { 
       let scrollX = (offsetX + mousemove_event.clientX - startX); 
       // img.style.left will keep increasing or decreasing, check if it approaches max_left or max_right 
       if (scrollX >= max_left || scrollX <= max_right) { 
        //return false;imageContainer.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)'; 
       } else { 
        if (scrollX < max_left) { img.style.left = min(scrollX, max_left) + 'px'; } 
        if (scrollX > max_right) { img.style.left = max(scrollX, max_right) + 'px'; } 
       } 
      } 
      // Dragging image top to bottom 
      if (!overflow_vertical) { 
      } else { 
       let scrollY = (offsetY + mousemove_event.clientY - startY); 
       // as an expanded image is pulled downwards, img.style.top keeps increasing to approach max_top 
       // if it reaches max top, simply do nothing, else keep increasing 
       // check for both conditions, approaching max_top and approaching max_bottom 
       if (scrollY >= max_top || scrollY <= max_bottom) { 
        // return false; 
       } else { 
        if (scrollY < max_top) { img.style.top = min(scrollY, max_top) + 'px'; } 
        if (scrollY > max_bottom) { img.style.top = max(scrollY, max_bottom) + 'px'; } 
       } 
      } 
      // return 
      return false; 
     } 
    } 

    // cancel mousemove event on mouseup 
    window.onmouseup = function(mouseup_event) { 
     window.onmousemove = null; 
     // Should not return false as it will interfere with range slider 
    } 
    // return false 
    return false; 
} 

Answer 1

現在は動作しています。以下のフィドルで 参照makeDraggable方法：

https://jsfiddle.net/daibatzu/0u74faz6/6/

あなたがしなければならないのは、画像のイベントリスナーにこの機能を追加するようなものです： するvar IMG =のdocument.getElementById（「MYIMAGE」）; img.addEventListener（ 'mousedown'、function（イベント）{makeDraggable（イベント）;}）;私はimg.style.transform = 'translate3d（scrollXpx、scrollYpx、0）スケーリング（currentScale）' でimg.style.topとimg.style.leftのすべてのインスタンスを置き換えると試み

コード

function makeDraggable(event) { 
    // get bounding rectangle 
    let imgRect = img.getBoundingClientRect(); 
    let parentRect = parent.getBoundingClientRect(); 
    // check overflow 
    let overflow_horizontal = (imgRect.width > parent.offsetWidth ? true : false); 
    let overflow_vertical = (imgRect.height > parent.offsetHeight ? true : false); 
    // get start position 
    let startX = event.pageX - translateX, startY = event.pageY - translateY; 
    let max_left = parentRect.left - imgRect.left; 
    let max_top = parentRect.top - imgRect.top; 
    window.onmousemove = function(evt) { 
     // set event object 
     if (evt == null) { evt = window.event; } 
     // Say max_left is 160px, this means we can only translate from 160px to -160px to keep the image visible 
     // so we check if the image moves beyond abs(160), if it does, set it to 160 or -160 depending on direction, else, let it continue 
     translateX = (Math.abs(evt.pageX - startX) >= max_left ? (max_left * Math.sign(evt.pageX - startX)) : (evt.pageX - startX)); 
     translateY = (Math.abs(evt.pageY - startY) >= max_top ? (max_top * Math.sign(evt.pageY - startY)) : (evt.pageY - startY)); 
     // check if scaled image width is greater than it's container. if it isn't set translateX to zero and so on 
     translateX = overflow_horizontal ? translateX : 0, translateY = overflow_vertical ? translateY : 0; 
     // translate parent div 
     parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)'; 
     // return 
     return false; 
    } 
    window.onmouseup = function(evt) { 
     // set mousemove event to null 
     window.onmousemove = null; 
    } 
    return false; 
};