SVG多边形在调整父div的大小时闪烁应保留实际形状 DEMO - APP

编程问答 2022-06-07

问题描述

注意：我们只需要使用ViewBox概念！

我有一个div（resize-div），在其中渲染SVG-多边形。我应该能够重新排列多边形点（通过拖放它们），或者可以调整resize-div的大小。

场景：1 ：我应该能够通过将多边形点拖到任意位置来重新排列多边形，并且resize-div（parent-div）将被重新排列/调整大小以容纳其中的所有点。 哪个工作正常。

方案2 ：完成多边形点的重新排列后，如果我尝试调整resize-div（parent-div）的大小，则整个svg或某些点闪烁。或者换句话说，在重新排列点之后，如果我双击resize-div（parent-div），整个形状就会闪烁。

在方案2中，我使用

  arrVertexes = arrVertexes.map(item => {
        return [(xScale.invert(item[0])),(yScale.invert(item[1])) ];
  });

但对于方案1，我不使用 scale.invert 。

预期的行为是它不应闪烁。它应该可以正常工作。

从过去2周开始尝试，但没有运气。实际应用是不同的。这只是真实应用中发生的事情的再现。。

DEMO - APP 

function resize(){

   arrVertexes = arrVertexes.map(item => {
        return [(xScale.invert(item[0])),(yScale.invert(item[1])) ];
    });


    const eve = $('.resize-div').style; 
    eveWidth = $('.resize-div').width() - 2;
    eveHeight = $('.resize-div').height() - 2; 
   
    if (width !== eveWidth) {
      width = eveWidth; 
    }

    if (height !== eveHeight) { 
      height = eveHeight;
    }
    
    getScaledPoints();
    reload();
}

不确定什么是错误的。试图将preserveAspectRation（我不需要）设置为none，但是没有用。

解决方法

您的代码一团糟...我几乎不明白那里发生了什么。

但要提一件事。 getScaledPoints函数中的以下代码：

return [Math.round(xScale(item[0])),Math.round(yScale(item[1]))];

应更改为：

return [xScale(item[0]),yScale(item[1])];

请勿在此处四舍五入！使用“缩放”时，应输入“真实”数字，而不是“整数”。例如：click。

javascriptpolygonresizesvgsvgsvg