SVG多边形在调整父div大小时闪烁(应保留实际形状) [英] SVG polygon flickers on resize the parent div (it should preserve the actual shape)

问题描述

注意:我们只需要使用Viewbox概念！

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

Scenario:1 : I should be able to re-arrange polygon points by dragging them anywhere and resize-div(parent-div) will be rearranged/resized to accommodate all points within it. Which is working fine.

场景2 :完成多边形点的重新排列后，如果我尝试调整resize-div(parent-div)的大小，则整个svg或某些点闪烁.或者换句话说，在重新排列点之后，如果我双击resize-div(parent-div)，整个形状就会闪烁.

Scenario-2: Once I'm done with rearranging the polygon points, If I try to resize the resize-div(parent-div), the entire svg or some points flicker. OR in other word, after re-arranging points, If I double tap the resize-div(parent-div), the entire shape flickers.

在方案2中，我使用

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

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

but for scenario-1 I don't use scale.invert.

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

The expected behavior is it should not flicker. It should work as is.

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

演示-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，但是没有用.

Not sure what is wrong. Tried to set preserveAspectRation(which I don't need) to none but it didn't work.

推荐答案

您的代码一团糟...我很难理解那里发生了什么.

You code is a mess... I hardly understand what is going on there.

但要提一件事. getScaledPoints 函数中的以下代码:

But one thing to mention. This code in getScaledPoints function:

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

应更改为:

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

请勿在此处四舍五入！当您使用缩放"时，您应该进入实数"状态.数字，而不是整数".例如:单击.

Do not make any rounding here! When you are working with "scaling", you should go into "real" numbers, not "integers". Example: click.

这篇关于SVG多边形在调整父div大小时闪烁(应保留实际形状)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！