JavaScript画布，包括调整图形大小_Javascript_Canvas_Resize

JavaScript画布，包括调整图形大小

javascript canvas

JavaScript画布，包括调整图形大小,javascript,canvas,resize,Javascript,Canvas,Resize,我使用画布通过拖放来定位对象，并在它们之间画线。在调整浏览器大小时，我将调整所有浏览器的大小。屏幕已调整大小，画布也包含所有对象。但是对象之间的线不在正确的位置。例如，如果我将尺寸从右下角减小到左上角，线条将移到左上角有人能帮忙吗向你问好，恩斯特 .item { border-radius: 50%; touch-action: none; user-select: none; position: absolute; } .kreis { width: 40px;

我使用画布通过拖放来定位对象，并在它们之间画线。在调整浏览器大小时，我将调整所有浏览器的大小。屏幕已调整大小，画布也包含所有对象。但是对象之间的线不在正确的位置。例如，如果我将尺寸从右下角减小到左上角，线条将移到左上角

有人能帮忙吗

向你问好，恩斯特

.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();
...
}

.item{
边界半径：50%；
触摸动作：无；
用户选择：无；
位置：绝对位置；
}
克雷斯先生{
宽度：40px；
高度：40px；
边框：3倍实心rgba（136、136、136、5）；
背景色：#FFFF00；
顶部：75px；
左：20px；
}
在window.onload=function（）中
addEventListener（“调整大小”，调整画布大小）；
函数ResizeCanvas（）{
addEventListener（“调整大小”，显示窗口大小）；
var canvas=document.getElementById（'DemoCanvas'）；
var context=canvas.getContext（'2d'）；
var比率=canvas.width/canvas.height；
var canvas_height=window.innerHeight；
var canvas_width=canvas_height*比率；
if（画布宽度>窗口内部宽度）{
画布宽度=window.innerWidth；
画布高度=画布宽度/比率；
}
canvas.style.width=canvas_width+'px'；
canvas.style.height=画布高度+px；
变量比例=（canvas.width/原始宽度）；
画布宽度=原始宽度*比例；
画布高度=原始高度*比例；
语境。尺度（尺度，尺度）；
Draw（）；
}
函数绘图（）{
...
context.strokeStyle=“#008800”；
setLineDash（[5,0]）；
context.beginPath（）；
moveTo（xA，yA-iAddTop）；
lineTo（xB，yB-iAddTop）；
stroke（）；
...
}
谢谢您的回复。我减少了html和js文件。有两个圆，可以通过拖放移动，并在它们之间画一条线。在resize上，您可以看到发生了什么
<!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();
              }
}

//----------------------------------------------------------
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();
              }
}

//----------------------------------------------------------
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();
              }
}

//--------------------------------------------------------
给我们展示一个小的工作示例，编辑文章并使用snippet按钮创建问题的最小示例。处理不完整的代码非常困难。另外，我注意到您正在一个函数中注册一个reise
事件，该函数用作另一个resizeevent handler.Ui。我认为问题在于圆圈。大小和位置不会移动。
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();
              }
}