如何在每次右键单击时将图像旋转 10 度而不影响具有相同类别的其他图像

问题描述

我想通过每次右键单击将图像旋转 10 度，而不影响具有相同类别的其他图像。我只在定义的区域使用右键单击，因为左键单击和双击用于其他操作。

document.getElementById('dropzone').addEventListener('contextmenu',(e)=>{
  e.preventDefault();

    document.addEventListener('click',function(e)
    {
        let degrees = 0;
        let targetElement = e.target || e.srcElement;
        // draggable
        if (targetElement.classList.contains('draggable')) {
            targetElement.classList.add("elementRotate");
            degrees += 10;
            $(".elementRotate").click(function () {
                degrees += 10;
                $(this).css("transform","rotate(" + degrees + "deg)");  
                targetElement.classList.remove( "elementRotate" );           
            });
        }
    })              
})

html


<div id="dropzone">
    <img id="paper1" class="draggable resizable TrgtPaper" src="{{ asset('images/IPSC_Mini_Target.png') }}" title="target" alt="minitarget">
    <img id="paper1" class="draggable resizable TrgtPaper" src="https://zupimages.net/up/20/50/z9va.png" title="target" alt="minitarget">
    <img id="decor1" class="draggable elementRotate resizable" src="https://www.tsvstagemaker.fr/images/Panneau_tsv1.svg" width="83" alt="images/svg/panneau.svg">

    <svg id="decorsvg" class="draggable elementRotate resizable" width="91" height="64" viewBox="0 0 91 64" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="6.20657" y="42" width="1.42056" height="21" transform="rotate(14.3552 6.20657 42)" fill="#5779B6" />
    <rect x="6.02635" y="41.6958" width="1.92056" height="21.5" transform="rotate(14.3552 6.02635 41.6958)" stroke="black" stroke-opacity="0.6" stroke-width="0.5" />
    <rect x="82.9484" y="42.3693" width="1.42056" height="21" transform="rotate(-14.6511 82.9484 42.3693)" fill="#5779B6" />
    <rect x="82.6433" y="42.1907" width="1.92056" height="21.5" transform="rotate(-14.6511 82.6433 42.1907)" stroke="black" stroke-opacity="0.6" stroke-width="0.5" />
    <rect class="panneau1" x="3.50002" y="0.5" width="83" height="52" fill="#CD7330" fill-opacity="0.58" stroke="#5779B6" />
    </svg>
</div>

谢谢

解决方法

使用 jQuery 获得所需的输出。

? Codepen Example

代码片段：

// function for calculating current angle of images
function calculateAngle(elementId) {
    var element = document.getElementById(elementId);
    var tr = (window.getComputedStyle(element,null)).getPropertyValue("transform"),values = tr.split('(')[1],values = values.split(')')[0],values = values.split(','),a = values[0],b = values[1],c = values[2],d = values[3],radians = Math.atan2(b,a);
    if (radians < 0) {
        radians += (2 * Math.PI);
    }
    return Math.round(radians * (180 / Math.PI));
}

$(document).ready(function() {
  // disable right click browser context menu
  document.oncontextmenu = function() {return false;};
  
  $('.draggable').mousedown(function(e){ 
    if( e.button == 2 ) { 
      var selectedId = $(this).attr('id');
      var currentDegree = calculateAngle(selectedId);
      var newDegree = parseInt(currentDegree) + parseInt(10);
      $(this).css({"transform":"rotate(" + newDegree + "deg)"});
    } 
    return true; 
  });
});

/* set rotate 0 by default */
.draggable {
  transform: rotate(0deg);
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="dropzone">
  <img id="paper1" class="draggable resizable TrgtPaper" src="https://zupimages.net/up/20/50/z9va.png" title="target" alt="minitarget">
  <img id="decor1" class="draggable elementRotate resizable" src="https://www.tsvstagemaker.fr/images/Panneau_tsv1.svg" width="83" alt="images/svg/panneau.svg">
  <svg id="decorsvg" class="draggable elementRotate resizable" width="91" height="64" viewBox="0 0 91 64" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="6.20657" y="42" width="1.42056" height="21" transform="rotate(14.3552 6.20657 42)" fill="#5779B6" />
    <rect x="6.02635" y="41.6958" width="1.92056" height="21.5" transform="rotate(14.3552 6.02635 41.6958)" stroke="black" stroke-opacity="0.6" stroke-width="0.5" />
    <rect x="82.9484" y="42.3693" width="1.42056" height="21" transform="rotate(-14.6511 82.9484 42.3693)" fill="#5779B6" />
    <rect x="82.6433" y="42.1907" width="1.92056" height="21.5" transform="rotate(-14.6511 82.6433 42.1907)" stroke="black" stroke-opacity="0.6" stroke-width="0.5" />
    <rect class="panneau1" x="3.50002" y="0.5" width="83" height="52" fill="#CD7330" fill-opacity="0.58" stroke="#5779B6" />
  </svg>
</div>

不是将 degrees 存储为全局变量，您只需检查 this 是否具有转换属性。如果不是，则将其分配为 rotate(10deg)，否则您可以通过执行 parseInt(this.style.transform.split("(")[1]) 来访问当前的旋转度数。获得此值后，将其加 10 并将其指定为新的度数值。

document.getElementById('dropzone').addEventListener('contextmenu',(e) => {
  e.preventDefault();

  document.addEventListener('click',function(e) {
    let degrees = 0;
    let targetElement = e.target || e.srcElement;
    // draggable
    if (targetElement.classList.contains('draggable')) {
      targetElement.classList.add("elementRotate");
      degrees += 10;
      $(".elementRotate").click(function() {
        degrees += 10;
        $(this).css("transform","rotate(" + degrees + "deg)");
        targetElement.classList.remove("elementRotate");
      });

    }

  })
})


// rotation elements      
//change out contextmenu with click if you want it onclick
 $(".elementRotate").contextmenu(function (e) {
   if (this.style.transform.length){
     var num = parseInt(this.style.transform.split("(")[1])
     num += 10
     $(this).css("transform","rotate(" + num + "deg)");  
   } else {
     $(this).css("transform","rotate(" + 10 + "deg)"); 
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropzone">

<!--  <img id="paper1" class="draggable resizable TrgtPaper" src="{{ asset('images/IPSC_Mini_Target.png') }}" title="target" alt="minitarget">
-->
  <img id="paper1" class="draggable resizable TrgtPaper" src="https://zupimages.net/up/20/50/z9va.png" title="target" alt="minitarget">

  <img id="decor1" class="draggable elementRotate resizable" src="https://www.tsvstagemaker.fr/images/Panneau_tsv1.svg" width="83" alt="images/svg/panneau.svg">

  <svg id="decorsvg" class="draggable elementRotate resizable" width="91" height="64" viewBox="0 0 91 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="6.20657" y="42" width="1.42056" height="21" transform="rotate(14.3552 6.20657 42)" fill="#5779B6" />
<rect x="6.02635" y="41.6958" width="1.92056" height="21.5" transform="rotate(14.3552 6.02635 41.6958)" stroke="black" stroke-opacity="0.6" stroke-width="0.5" />
<rect x="82.9484" y="42.3693" width="1.42056" height="21" transform="rotate(-14.6511 82.9484 42.3693)" fill="#5779B6" />
<rect x="82.6433" y="42.1907" width="1.92056" height="21.5" transform="rotate(-14.6511 82.6433 42.1907)" stroke="black" stroke-opacity="0.6" stroke-width="0.5" />
<rect class="panneau1" x="3.50002" y="0.5" width="83" height="52" fill="#CD7330" fill-opacity="0.58" stroke="#5779B6" />
</svg>

</div>

html javascript right-click rotatetransform

如何在每次右键单击时将图像旋转 10 度而不影响具有相同类别的其他图像

问题描述

解决方法

相关问答