javascript - 通过 javascript 调整 SVG viewBox 行为

Question

我正在使用普通 JavaScript 来导航漫画书的页面。但是，我需要设置一个条件来检查当前多边形中的点是否与下一个多边形中的点相交。如果为 true，我希望 viewBox 从当前点到下一个点进行动画处理，如果为 false，则什么都不发生(使用默认的淡入淡出过渡)。

这是我的代码的一部分

var DELAY = 400;

function nextArea() {
    if (isFirstPage() || areaIndex >= areas.length - 1) {
      changePage(true);
      changeArea();
    } else {
      fade();
      areaIndex++;
      setTimeout(changeArea, DELAY);
    }
  }

  function prevArea() {
    if (isLastPage() || areaIndex <= 0) {
      changePage(false);
      changeArea();
    } else {
      fade();
      areaIndex--;
      setTimeout(changeArea, DELAY);
    }
  }

  function changeArea() {
    if (isFirstPage() || isLastPage()) {
      return;
    }

    var activeArea = areas[areaIndex];
    var points = activeArea.getAttribute('points').split(' ');
    var xy1 = points[0].split(',');
    var xy2 = points[1].split(',');
    var xy3 = points[2].split(',');
    var box = [xy1[0], xy1[1], xy2[0] - xy1[0], xy3[1] - xy2[1]];

    activePage.classList.remove('fade');
    activePage.setAttribute('viewBox', box.join(' '));
    activeRect = rects[pageIndex - 1];
    activeRect.setAttribute('x', xy1[0]);
    activeRect.setAttribute('y', xy1[1]);
  }

我的代码存储库在这里:https://github.com/cnario/svg-carousel

这是我迄今为止所拥有的:https://cnario.github.io/svg-carousel/

这是我期望它的行为方式:https://read.marvel.com/#book/41323

Answer 1

我想这就是您可能需要的:一种将 viewBox 从一个值转换为另一个值的方法，以便每次 viewBox 中只有 svg 的一部分。

let BB = {};
BB.tomato = tomato.getBBox();
BB.skyblue = skyblue.getBBox();
BB.gold = gold.getBBox();


let radios = document.querySelectorAll("#controls input");

radios.forEach(r =>{
  let color = r.dataset.color;
  let bb = BB[color];
  
  r.addEventListener("change",()=>{
    svg.setAttributeNS(null,"viewBox", `${bb.x} ${bb.y} ${bb.width} ${bb.height}`)
    svg.style.height = `${bb.height * 300 / bb.width}px`; 
  })
  
})

svg {
  width: 300px;
  border: 1px solid;
  height: 600px;
  transition: height 1s;
}

<p id="controls">
  <label>tomato: <input type="radio" name="selector" data-color="tomato" /></label>
  <label>skyblue: <input type="radio" name="selector" data-color="skyblue" /></label>
  <label>gold: <input type="radio" name="selector" data-color="gold" /></label>
</p>

<svg id="svg" viewBox="0 0 100 200">
  <g id="tomato">
    <circle cx="35" cy="70" r="25" fill="tomato" />
  </g>
  <g id="skyblue">
    <ellipse cx="75" cy="160" rx="15" ry="35" fill="skyblue" />
  </g>
  <g id="gold">
    <polygon fill="gold" points="75,15 60,30 90,30" />
  </g>
</svg>