绘制SVG矩形问题：无限长和眨眼

问题描述

我正在尝试用鼠标绘制一个。当鼠标移动并按下时，它会绘制该区域，但是在此期间，该区域会闪烁。在控制台中，当setAttribute添加宽度和高度时，有时会出现“ Infinity”，这是问题所在，但我不明白为什么，因为当我注释configRectSize(document.getElementById(rectId),width,height);这行时，所有数字都是正确的。 / p>

我还有其他绘画问题。当currentX或currentY坐标低于initX或initY时，我将x和y rect坐标更改为能够沿其他方向绘制（不仅从左到右，从上到下），但有时rect消失或更改为其他不同的坐标

能帮我吗？这让我发疯了！

非常感谢！

https://jsfiddle.net/albaruz/scegfom8/23/

var ns = "http://www.w3.org/2000/svg";
var svgId = "SvgId";
var image = document.getElementById("PlanImage");

function initSVG(SvgName,container) {
  svg = document.createElementNS(ns,"svg");
  var svgId = SvgName;
  svg.setAttributeNS(null,"id",svgId);
  container.appendChild(svg);

  return svgId;
}

function calculateSVGSize(SvgName,container) {
  var imageWidth = container.clientWidth;
  var imageHeight = container.clientHeight;
  var aspectRatio = (imageHeight * 100) / imageWidth;
  document
    .getElementById(SvgName)
    .setAttributeNS(null,"viewBox","0 0 100 " + aspectRatio);
}

function configRectSize(rect,height) {
  rect.setAttributeNS(null,"width",width);
  rect.setAttributeNS(null,"height",height);
}

function getY(rect,y) {
  rect.setAttributeNS(null,"y",y);
}

function getX(rect,x) {
  rect.setAttributeNS(null,"x",x);
}

function configRectCoords(rect,x,y) {
  getY(rect,y);
  getX(rect,x);
}

function configRect(name,height,y,isBooking) {
  var rect = document.getElementById(name);
  configRectSize(rect,height);
  configRectCoords(rect,y);
  rect.setAttributeNS(
    null,"fill",isBooking ? "rgba(0,265,.3)" : "rgba(265,.3)"
  );
  rect.onclick = function() {
    alert(name);
  };
}

function createRect(SvgName,name) {
  var rect = document.createElementNS(ns,"rect");
  rect.id = name;
  document.getElementById(SvgName).appendChild(rect);
}

function drawRect(SvgName,rectId) {
  var svg = document.getElementById(SvgName);
  var rect = document.getElementById(rectId);
  var isMouseDown = false;
  var isMouseMoving = true;
  var initX;
  var initY;

  var handleMouseMove = function(e,initX,initY) {
    var currentX = ((e.offsetX * 100) / e.target.clientWidth).toFixed(2);
    var currentY = ((e.offsetY * 100) / e.target.clientHeight).toFixed(2);

    var width = Math.sqrt(Math.pow(initX - (currentX),2)).toFixed(2);
    var height = Math.sqrt(Math.pow(initY - (currentY),2)).toFixed(2);
    
    console.log(`currentX: ${currentX}`);
    console.log(`currentY: ${currentY}`);
    console.log(`width: ${width}`);
    console.log(`height: ${height}`);

   if (currentY < initY && currentX < initX) {

      configRectCoords(
        document.getElementById(rectId),currentX,currentY
      );
    } 
    else if (currentX < initX)
      configRectCoords(document.getElementById(rectId),initY);

    else if (currentY < initY)
      configRectCoords(document.getElementById(rectId),currentY);
    else
      configRectCoords(document.getElementById(rectId),initY);


    configRectSize(document.getElementById(rectId),height);


 
  };

  svg.addEventListener("mousedown",function(e) {
  
  
    isMouseDown = true;
    console.log("estoy apretando");
    initX = ((e.offsetX * 100) / e.target.clientWidth).toFixed(2);
    initY = ((e.offsetY * 100) / e.target.clientHeight).toFixed(2);
    console.log(`initX: ${initX}`);
    console.log(`initY: ${initY}`);

    //Initialize RectCreation
    if (!document.getElementById(rectId)) {
      createRect(SvgName,rectId);
    }

    configRectCoords(document.getElementById(rectId),initY);
    configRectSize(document.getElementById(rectId),0);


  });

  svg.addEventListener("mousemove",function(e) {
    if (!isMouseDown) return;
    e.preventDefault();
  e.stopPropagation(); 
    console.log("me estoy moviendo");
    handleMouseMove(e,initY);
  });

  svg.addEventListener("mouseup",function(e) {
    isMouseDown = false;
  });
}
initSVG(svgId,DeskInteraction);

image.onload = function() {
  calculateSVGSize(svgId,DeskInteraction);
};

drawRect(svgId,DeskInteraction);

  .plan-wrapper {
      position: relative;
      max-width: 500px;
    }
    .plan-wrapper img {
      width: 100%;
    }
    .plan-wrapper .plan-interaction {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      z-index: 10;
    }

  <div data-container="" class="plan-wrapper" id="PlanContainer">
    <img data-image="" class="plan-image" id="PlanImage" style="margin-left: auto" src="https://www.jcadg.com/2d-3d-floor-plan/images/mobile/gold.jpg" />
    <div data-container="" class="plan-interaction" id="DeskInteraction"></div>
  </div>

解决方法

计算x和y坐标的方法不正确，即使您对任何DOM元素也是如此。如果是svg元素（您将手柄附加到该元素），则还需要考虑坐标上的任何变换。使用matrixTransform和getScreenCTM很简单。我在脚本中添加了一个名为getSVGCoords的函数，并调用它来计算初始坐标和当前坐标：

var ns = "http://www.w3.org/2000/svg";
var svgId = "SvgId";
var image = document.getElementById("PlanImage");

function initSVG(SvgName,container) {
  svg = document.createElementNS(ns,"svg");
  var svgId = SvgName;
  svg.setAttributeNS(null,"id",svgId);
  container.appendChild(svg);

  return svgId;
}

function calculateSVGSize(SvgName,container) {
  var imageWidth = container.clientWidth;
  var imageHeight = container.clientHeight;
  var aspectRatio = (imageHeight * 100) / imageWidth;
  document
    .getElementById(SvgName)
    .setAttributeNS(null,"viewBox","0 0 100 " + aspectRatio);
}

function configRectSize(rect,width,height) {
  rect.setAttributeNS(null,"width",width);
  rect.setAttributeNS(null,"height",height);
}

function getY(rect,y) {
  rect.setAttributeNS(null,"y",y);
}

function getX(rect,x) {
  rect.setAttributeNS(null,"x",x);
}

function configRectCoords(rect,x,y) {
  getY(rect,y);
  getX(rect,x);
}

function configRect(name,height,y,isBooking) {
  var rect = document.getElementById(name);
  configRectSize(rect,height);
  configRectCoords(rect,y);
  rect.setAttributeNS(
    null,"fill",isBooking ? "rgba(0,265,.3)" : "rgba(265,.3)"
  );
  rect.onclick = function() {
    alert(name);
  };
}

function createRect(SvgName,name) {
  var rect = document.createElementNS(ns,"rect");
  rect.id = name;
  document.getElementById(SvgName).appendChild(rect);
}
function getSVGCoords(s,ev){
  var pt = s.createSVGPoint();
    pt.x = ev.clientX;
    pt.y = ev.clientY;
    var loc = pt.matrixTransform(svg.getScreenCTM().inverse());
  return loc
}
   
function drawRect(SvgName,rectId) {
  var svg = document.getElementById(SvgName);
  var rect = document.getElementById(rectId);
  var isMouseDown = false;
  var isMouseMoving = true;
  var initX;
  var initY;

  var handleMouseMove = function(e,initX,initY) {
    // Insertion HERE
    var loc = getSVGCoords(svg,e);
    var currentX = loc.x;
    var currentY = loc.y;
    //
    var width = Math.sqrt(Math.pow(initX - (currentX),2)).toFixed(2);
    var height = Math.sqrt(Math.pow(initY - (currentY),2)).toFixed(2);
    
    console.log(`currentX: ${currentX}`);
    console.log(`currentY: ${currentY}`);
    console.log(`width: ${width}`);
    console.log(`height: ${height}`);

   if (currentY < initY && currentX < initX) {

      configRectCoords(
        document.getElementById(rectId),currentX,currentY
      );
    } 
    else if (currentX < initX)
      configRectCoords(document.getElementById(rectId),initY);

    else if (currentY < initY)
      configRectCoords(document.getElementById(rectId),currentY);
    else
      configRectCoords(document.getElementById(rectId),initY);


    configRectSize(document.getElementById(rectId),height);


 
  };

  svg.addEventListener("mousedown",function(e) {
  
  
    isMouseDown = true;
    console.log("estoy apretando");
    var loc = getSVGCoords(svg,e);
    initX = loc.x;
    initY = loc.y;
    console.log(`initX: ${initX}`);
    console.log(`initY: ${initY}`);

    //Initialize RectCreation
    if (!document.getElementById(rectId)) {
      createRect(SvgName,rectId);
    }

    configRectCoords(document.getElementById(rectId),initY);
    configRectSize(document.getElementById(rectId),0);


  });

  svg.addEventListener("mousemove",function(e) {
    if (!isMouseDown) return;
    e.preventDefault();
  e.stopPropagation(); 
    console.log("me estoy moviendo");
    handleMouseMove(e,initY);
  });

  svg.addEventListener("mouseup",function(e) {
    isMouseDown = false;
  });
}
initSVG(svgId,DeskInteraction);

image.onload = function() {
  calculateSVGSize(svgId,DeskInteraction);
};

drawRect(svgId,DeskInteraction);

  .plan-wrapper {
      position: relative;
      max-width: 500px;
    }
    .plan-wrapper img {
      width: 100%;
    }
    .plan-wrapper .plan-interaction {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      z-index: 10;
    }

  <div data-container="" class="plan-wrapper" id="PlanContainer">
    <img data-image="" class="plan-image" id="PlanImage" style="margin-left: auto" src="https://www.jcadg.com/2d-3d-floor-plan/images/mobile/gold.jpg" />
    <div data-container="" class="plan-interaction" id="DeskInteraction"></div>
  </div>