堆栈内存溢出
  繁体   English   中英

JavaScript 画布包括绘图调整大小

[英]JavaScript canvas including drawings resize

 原文  2019-12-29 01:41:30  8   1    javascript/ canvas/ resize

问题描述

我使用画布通过拖放来定位对象并在它们之间画线。 OnResize the browser 我会调整所有的大小。 屏幕被调整大小，所有对象的画布也是如此。 但是对象之间的线不在正确的位置。 例如，如果我将大小从右下角减小到左上角，则线条会移到左上角。

有人可以帮忙吗？

最好的问候，恩斯特

.item {
  border-radius: 50%;
  touch-action: none;
  user-select: none;
  position: absolute;
}

.kreis {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(136, 136, 136, .5);
  background-color: #FFFF00;
  top: 75px;
  left: 20px;
}

<div class="item kreis" id="Kreis1" onclick="go(this);"></div>

In window.onload = function()
window.addEventListener("resize", ResizeCanvas);



    function ResizeCanvas() {
  window.addEventListener("resize", displayWindowSize);

  var canvas = document.getElementById('DemoCanvas');
  var context = canvas.getContext('2d');
  var ratio = canvas.width / canvas.height;
  var canvas_height = window.innerHeight;
  var canvas_width = canvas_height * ratio;
  if(canvas_width>window.innerWidth){
      canvas_width=window.innerWidth;
      canvas_height=canvas_width/ratio;
  }

  canvas.style.width = canvas_width + 'px';
  canvas.style.height = canvas_height + 'px';

  var scale=(canvas.width / originalWidth);
  canvas.width=originalWidth*scale;
  canvas.height=originalHeight*scale;
  context.scale(scale,scale);

  Draw();
}

    function Draw() {
...
              context.strokeStyle = "#008800";
              context.setLineDash([5, 0]);
              context.beginPath();
              context.moveTo(xA,yA - iAddTop);
              context.lineTo(xB,yB - iAddTop);
              context.stroke();
...
}

1 个解决方案

解决方案1
 0  2019-12-29 13:20:06

感谢你的回复。 我减少了 html 和 js 文件。 有两个圆圈，可以通过拖放移动，并在它们之间画一条线。 在调整大小时，您可以看到发生了什么。

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>NCS</title>
  <style>

body{ margin:0px; }

  #textarea {
  resize: both;
}

    #container {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      touch-action: none;
      border: 10px solid rgba(136, 136, 136, .5);
    }

    .scaled {
      transform: scale(1.0);
    }
    .item {
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      position: absolute;
    }

    .item2 {
      touch-action: none;
      user-select: none;
      position: absolute;
    }

    .kreis {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(136, 136, 136, .5);
      background-color: #FFFF00;
      top: 75px;
      left: 20px;
    }

    .item:active {
      opacity: .75;
    }

    .item:hover {
      cursor: pointer;
    }

canvas{border:1px;}
      </style>
</head>

<body>
<div id="result"></div>

  <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <div id="outerContainer">

    <div id="container">
      <fieldset id="fset">
        <div id="sca" class="scaled">
<script>
var a = "<canvas id='DemoCanvas' width='"
a = a + (window.innerWidth - 17) + "px";
a = a + "' height='";
a = a + window.innerHeight + "px"; //screen.height;
a = a + "' onClick='InvisibleMarker()' ></canvas>";
document.write(a);
</script>
      <div class="item kreis" id="Kreis1" onclick="go(this);"></div>
      <div class="item kreis" id="Kreis2" onclick="go(this);"></div>
      </div>
</fieldset>
    </div>
  </div>

  <script>
    var container = document.querySelector("#container");
    var activeItem = null;

    var active = false;

    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);

    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);

    function dragStart(e) {

      if (e.target !== e.currentTarget) {
        active = true;

        // this is the item we are interacting with
        activeItem = e.target;

        if (activeItem !== null) {
          if (!activeItem.xOffset) {
            activeItem.xOffset = 0;
          }

          if (!activeItem.yOffset) {
            activeItem.yOffset = 0;
          }

          if (e.type === "touchstart") {
            activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
            activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
          } else {
            console.log("doing something!");
            activeItem.initialX = e.clientX - activeItem.xOffset;
            activeItem.initialY = e.clientY - activeItem.yOffset;
          }
        }
      }
    }

    function dragEnd(e) {
      if (activeItem !== null) {
        activeItem.initialX = activeItem.currentX;
        activeItem.initialY = activeItem.currentY;
      }

      active = false;
      activeItem = null;
      Draw();
    }

    function drag(e) {
      if (active) {
        if (e.type === "touchmove") {
          e.preventDefault();

          activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
          activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
        } else {
          activeItem.currentX = e.clientX - activeItem.initialX;
          activeItem.currentY = e.clientY - activeItem.initialY;
        }

        activeItem.xOffset = activeItem.currentX;
        activeItem.yOffset = activeItem.currentY;

        setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
      }
    }

    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  </script>


  <script type="text/javascript" src="functions.js"></script>
</div>


<script>
function displayWindowSize(){
    }
</script>

</body>

</html>

"使用严格" // ------------------------------------- --------------

window.onload = function()
{
  window.addEventListener("resize", ResizeCanvas);
}

// ------------------------------------------------ ----------

function ResizeCanvas() {
  window.addEventListener("resize", displayWindowSize);

  var canvas = document.getElementById('DemoCanvas');
  var context = canvas.getContext('2d');
  var ratio = canvas.width / canvas.height;
  var canvas_height = window.innerHeight;
  var canvas_width = canvas_height * ratio;
  if(canvas_width>window.innerWidth){
      canvas_width=window.innerWidth;
      canvas_height=canvas_width/ratio;
  }

  canvas.style.width = canvas_width + 'px';
  canvas.style.height = canvas_height + 'px';

  var scale=(canvas.width / originalWidth);
  canvas.width=originalWidth*scale;
  canvas.height=originalHeight*scale;
  context.scale(scale,scale);

  Draw();
}

// ------------------------------------------------ ----------

function go(node){
  sAktNodeId = node.id;
  ResizeSelect();
}

// ------------------------------------------------ ----------

function Draw() {

  var canvas = document.getElementById('DemoCanvas');
  var context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height);
  if (canvas.getContext)
   {
     var rec = document.getElementById("Kreis1").getBoundingClientRect();
     var iFromX = rec.left;
     var iFromY = rec.top;
     rec = document.getElementById("Kreis2").getBoundingClientRect();
     var iToX = rec.left;
     var iToY = rec.top;
      context.strokeStyle = "#008800";
      context.setLineDash([5, 0]);

      context.beginPath();
      context.moveTo(iFromX,iFromY);
      context.lineTo(iToX,iToY);
      context.stroke();
              }
}

// ------------------------------------------------ ----------

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript Canvas，调整图像大小 JavaScript 事件 canvas resize 在设置时间后使用canvas和javascript更改图形的颜色值 使用量角器测试画布图 JavaScript Canvas-重新调整窗口大小 无法在画布中调整图像大小 - Javascript 如何使用 JavaScript 调整画布大小？ 调整图像大小，然后在画布中旋转-javascript 我无法在JavaScript中调整画布的大小 使用 javascript 画布调整图像大小（平滑）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM