改变变换值： translate(-13px, 0px) scale(1, 1) rotate(0deg) 分别

Question

我想让 2 个跨度像镜像一样工作，当我移动一秒钟时，我必须朝相反的方向移动

第一个跨度

<span style="transform: translate(-13px, 0px) scale(1, 1) rotate(0deg);">
<img src="./ImageEditor Demo_files/ImageRight.png" style="width: 750px; height: 750px;">
</span>

第二跨度

<span style="transform: translate(13px, 0px) scale(-1, -1) rotate(-0deg);">
<img src="./ImageEditor Demo_files/ImageLeft.png" style="width: 750px; height: 750px;">
</span>

我正在使用的逻辑

var observer1 = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutationRecord) {
      var transform1 = document.getElementsByTagName('span')[3].style.transform;
document.getElementsByTagName('span')[0].style.transform = transform1
      
  });    
});

var target = document.getElementsByTagName('span')[0];

observer.observe(target, { attributes : true, attributeFilter : ['style'] });

当第一个 css 发生变化时触发，它改变第二个跨度 css 与第一个相同，但我希望它喜欢如果第一个旋转是 10 度，那么第二个它应该是 -10 度，平移和缩放相同

请看一下

Answer 1

您可以使用 regex 从转换字符串中提取所有数值，然后在反转/镜像它们后将它们放回：

[mirror].style.transform = [source].style.transform.replace(/[-?\.?\d]+/g,function(match){return -1*Number(match);});

• 这个正则表达式模式 (/.../g) 基本上在提供的字符串中查找所有 (g) 数字 (\d+)，带有可选的减号 (-?) 和/或小数点 (\.?) .
  有关此模式如何工作的详细说明，请参阅 https://regexr.com/57knk。
• 请参阅 string.replace() 和 string.replace() with function，了解 replace 函数的其余部分如何工作。

在下面的 live sn-p 中，我还更改了一些其他内容，以使您的代码更加灵活，我将在 sn-p 之后对这些更改进行评论：

document.getElementById('transform').onclick = function(){document.getElementsByClassName('elem source')[0].style.transform = this.previousElementSibling.value;};
/*ONLY FOR DEMO*/

var elemMirror = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    document.getElementsByClassName(mutation.target.className.replace('source','mirror'))[0].style.transform = mutation.target.style.transform.replace(/[-?\.?\d]+/g,function(match){return -1*Number(match);});
  });
});
elemMirror.observe(document.getElementsByClassName('elem source')[0], {attributes:true, attributeFilter:['style']});

form {width:100%; margin-bottom:30px;}
form span {font-weight:bold;}
form input {margin:0; box-sizing:border-box;}
form input[type=text] {width:calc(100% - 50px); font-family:monospace;}
form input[type=button] {width:50px;}
/*ONLY FOR DEMO*/

.elem {
  float: left;
  width: 50%;
  text-align: center;
  transform: translate(0px,0px) scale(1,1) rotate(0deg);
}
.elem img {width:79px; height:79px;}

<form>
  <span>Transform the first, mirror the second:</span><br />
  <input type="text" value="translate(0px,0px) scale(1,1) rotate(0deg)" /><input type="button" id="transform" value="apply" />
</form>
<!--ONLY FOR DEMO-->

<div class="elem source"><img src="https://i.stack.imgur.com/WiZzP.png"></div>
<div class="elem mirror"><img src="https://i.stack.imgur.com/WiZzP.png"></div>

jsfiddle：https://jsfiddle.net/hk2gbuj6/4/

• 如上所述，ONLY FOR DEMO cmets 上方的所有内容仅用于演示目的，您可以随意使用它。
• 我将您的span 更改为div，因为我无法让transform 处理span。
• 我给了第一个divclass="elem source"，第二个divclass="elem mirror"。
  elem 类可以是任何你想要的，只要确保 source 和 mirror 元素都具有相同的类。
  然后，确保原始/source 元素具有类 source，并且应该镜像该原始/源元素的元素具有类 mirror。这两个类将在 MutationObserver 函数中使用，以可变的方式引用这两个元素。
• 现在，在 MutationObserver() 内部，我参考了将 source 和 mirror 元素硬编码到函数中（您的 ('span')[0] 和 ('span')[3]）以可变的方式对他们：
  1. 我使用mutation.target 来引用source 元素。
  2. 我使用mutation.target.className.replace('source','mirror') 来引用mirror 元素。
  3. 所以现在你只需在调用MutationObserver.observe()时更改target：
     elemMirror.observe(document.getElementsByClassName('elem source')[0], {...});
     
     

---

选择要镜像的变换值：

如果您不想镜像所有的变换值，而只想镜像少数几个，请更改：

document.getElementsByClassName(mutation.target.className.replace('source','mirror'))[0].style.transform = mutation.target.style.transform.replace(/[-?\.?\d]+/g,function(match){return -1*Number(match);});

到这里：

var mirrorValues = ['translate','rotate']; //transform-values to mirror
var transform = mutation.target.style.transform.split(') ');
transform.forEach(function(item,index) {
  if (mirrorValues.indexOf(item.substring(0,item.indexOf('('))) != -1) {
    transform[index] = item.replace(/[-?\.?\d]+/g,function(match){return -1*Number(match);});
  }
});
document.getElementsByClassName(mutation.target.className.replace('source','mirror'))[0].style.transform = transform.join(') ');

document.getElementById('transform').onclick = function(){document.getElementsByClassName('elem source')[0].style.transform = this.previousElementSibling.value;};
/*ONLY FOR DEMO*/

var elemMirror = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    var mirrorValues = document.getElementById('mirrorValues').value.split(',');
    var transform = mutation.target.style.transform.split(') ');
    transform.forEach(function(item,index) {
      if (mirrorValues.indexOf(item.substring(0,item.indexOf('('))) != -1) {
        transform[index] = item.replace(/[-?\.?\d]+/g,function(match){return -1*Number(match);});
      }
    });
    document.getElementsByClassName(mutation.target.className.replace('source','mirror'))[0].style.transform = transform.join(') ');
  });
});
elemMirror.observe(document.getElementsByClassName('elem source')[0], {attributes:true, attributeFilter:['style']});

form {width:100%; margin-bottom:20px;}
form span {font-weight:bold;}
form input {margin:0; box-sizing:border-box;}
form input[type=text] {width:calc(100% - 50px); font-family:monospace;}
form input[type=button] {width:50px;}
/*ONLY FOR DEMO*/

.elem {
  float: left;
  width: 50%;
  text-align: center;
  transform: translate(0px,0px) scale(1,1) rotate(0deg);
}
.elem img {width:79px; height:79px;}

<form>
  <span>Transform-values to mirror (separate by comma):</span><br />
  <input type="text" id="mirrorValues" value="translate,scale,rotate" /><br />
  <span>Transform the first, mirror the second:</span><br />
  <input type="text" value="translate(0px,0px) scale(1,1) rotate(0deg)" /><input type="button" id="transform" value="apply" />
</form>
<!--ONLY FOR DEMO-->

<div class="elem source"><img src="https://i.stack.imgur.com/WiZzP.png"></div>
<div class="elem mirror"><img src="https://i.stack.imgur.com/WiZzP.png"></div>

jsfiddle：https://jsfiddle.net/hk2gbuj6/5/

• var mirrorValues = ['translate','rotate']; 创建一个包含所有要镜像的变换值的数组。
  var mirrorValues = document.getElementById('mirrorValues').value.split(','); 在 sn-p 中用于从输入字段文本创建一个数组。
• var transform = mutation.target.style.transform.split(') '); 从 source 元素的 transform-property 创建一个数组，其中所有单独的值都被拆分为单独的数组值。
• transform.forEach(function(item,index) {...}); 然后遍历所有单独的值，
  if (mirrorValues.indexOf(item.substring(0,item.indexOf('('))) != -1) {...} 检查该值是否在 mirrorValues-array 中。
• 如果是，transform[index] = item.replace(/[-?\.?\d]+/g, ...); 将反转/镜像该值。
• 最后，[mirror].style.transform = transform.join(') '); 会将所有单独的数组值再次组合到一个“转换”字符串中。

请参阅 array.indexOf()、string.substring()、string.indexOf()、string.split() 和 >array.join() 了解我正在使用的所有操作的更多信息。

Answer 2

我用 split 解决了这个问题

var observer = new MutationObserver(function(mutations) {
  
  arrsplit = document.getElementsByTagName('span')[0].style.transform.split(/[\(,)px]+/);
  replace = arrsplit[7].replace('deg','')
  mirror= arrsplit[0]+"("+parseFloat(arrsplit[1])*-1+"px"+", "+parseFloat(arrsplit[2])*1+"px"+")"
  +arrsplit[3]+"("+parseFloat(arrsplit[4])*1+", "+parseFloat(arrsplit[5])*1+")"+
  arrsplit[6]+"("+parseFloat(replace)*-1+"deg"+")";

  mutations.forEach(function(mutationRecord) {
  document.getElementsByTagName('span')[3].style.transform = mirror
  console.log('style changed!');
}

 var observer1 = new MutationObserver(function(mutations) {
  
  arrsplit = document.getElementsByTagName('span')[3].style.transform.split(/[\(,)px]+/);
  replace = arrsplit[7].replace('deg','')
  mirror= arrsplit[0]+"("+parseFloat(arrsplit[1])*-1+"px"+", "+parseFloat(arrsplit[2])*1+"px"+")"
  +arrsplit[3]+"("+parseFloat(arrsplit[4])*1+", "+parseFloat(arrsplit[5])*1+")"+
  arrsplit[6]+"("+parseFloat(replace)*-1+"deg"+")";
  
  mutations.forEach(function(mutationRecord) {
  var transform1 = document.getElementsByTagName('span')[3].style.transform;
  document.getElementsByTagName('span')[0].style.transform = mirror
  
  });    
  });
  
  var target = document.getElementsByTagName('span')[0];
  var target2 = document.getElementsByTagName('span')[3];
  observer1.observe(target2, { attributes : true, attributeFilter : ['style'] });
  observer.observe(target, { attributes : true, attributeFilter : ['style'] });