HTML javascript, canvas中的拖动方法

Question

我使用 HTML canvas 制作了一个正方形网格，我正在实施拖动机制，这样用户就可以通过在网格上拖动来仅绘制矩形。

在下面的解决方案中，用户可以绘制非矩形形状，具体取决于用户拖动的方式。

追加问题: 网格可以是任意大小，对于大矩形拖拽操作会比较卡顿。有什么性能改进建议吗？

这是我的 html 和 javascript

代码

function getSquare(canvas, evt) {

    var rect = canvas.getBoundingClientRect();
    return {
        x: 1 + (evt.clientX - rect.left) - (evt.clientX - rect.left)%10,
        y: 1 + (evt.clientY - rect.top) - (evt.clientY - rect.top)%10
    };
}


function emptySquare(context) {
    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "#ffffff"
    context.fill();
    context.strokeStyle = "#ddd";
    context.stroke();
}
function range(start, end) {
    var ans = [];
    if (end > start) {
        for (let i = start; i <= end; i += 10) {
            ans.push(i);
        }
    } else {
        emptySquare(context);
        for (let i = start; i >= end; i -= 10) {
            ans.push(i);
    }}
    return ans;
}
function drawBoard(context) {
    for (var x = 0.5; x < 20001; x += 10) {
      context.moveTo(x, 0);
      context.lineTo(x,20000);
    }

    for (var y = 0.5; y < 20001; y += 10) {
      context.moveTo(0, y);
      context.lineTo(20000, y);
    }

    context.strokeStyle = "#ddd";
    context.stroke();
}

function fillSquare(context, x, y){
    context.fillStyle = "#70B7B5";
    context.fillRect(x,y,9,9);
}

var canvas = document.getElementById('myBoard');
var context = canvas.getContext('2d');
var A;
drawBoard(context);
var isDrag= false;
// drawBoard(context);


canvas.addEventListener('mousedown', function(evt) {
    var mousePos = getSquare(canvas, evt);
    isDrag=true;
    fillSquare(context, mousePos.x, mousePos.y);
    
    previousPos = mousePos;


}, false);

 
canvas.addEventListener('mousemove', function(evt) {
    if (isDrag) {
        
        var mousePos = getSquare(canvas, evt);
        var x_dist = range(previousPos.x, mousePos.x);
        var y_dist = range(previousPos.y, mousePos.y);
        
        for (x in x_dist) {
            for (y in y_dist) {
                fillSquare(context, x_dist[x], y_dist[y]);
                }
            }
    }
}, false);

canvas.addEventListener('mouseup', function(evt) {
    if (isDrag){
        isDrag = false;
    } 

}, false);

var canvas = document.getElementById('myBoard');
var context = canvas.getContext('2d');

// drawBoard(context);

var isDrag=false;

canvas.addEventListener('mousedown', function(evt) {
    var mousePos = getSquare(canvas, evt);
    isDrag=true;
    fillSquare(context, mousePos.x, mousePos.y);
    
    previousPos = mousePos;


}, false);

 
canvas.addEventListener('mousemove', function(evt) {
    if (isDrag) {
        
        var mousePos = getSquare(canvas, evt);
        var x_dist = range(previousPos.x, mousePos.x);
        var y_dist = range(previousPos.y, mousePos.y);
        
        for (x in x_dist) {
            for (y in y_dist) {
                fillSquare(context, x_dist[x], y_dist[y]);
                }
            }
    }
}, false);

canvas.addEventListener('mouseup', function(evt) {
    if (isDrag){
        isDrag = false;
    } 

}, false);

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./assets/css/style.css">


    
    <meta charset="utf-8">
</head>

<body>

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
      <a class="navbar-brand" href="index.html">t</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-link" aria-current="page" href="index.html">Home</a>
            <a class="nav-link" href="#">About Us</a>
            <a class="nav-link" href="Myblock.html">Mk</a>
        </div>
        <div class="navbar-nav ms-auto mb-2 mb-lg-0">
          <a class="nav-link" href="login.html">Login</a>
        </div>
      </div>
   </div>
  </nav>
<div>

            <div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">간판 구입</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                    <form action="" method="POST" enctype="multipart/form-data">
                      <div class="container">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                         
                              <div class="preview-zone hidden">
                                <div class="box box-solid">
                                  <div class="box-header with-border">
                                    <div><b>미리보기</b></div>
  <!--                                   <div class="box-tools pull-right">
                                      <button type="button" class="btn btn-danger btn-xs remove-preview">
                                        <i class="fa fa-times"></i> 초기화
                                      </button>
                                    </div> -->
                                  </div>
                                  <div class="box-body"></div>
                                </div>
                              </div>
                              <div class="dropzone-wrapper">
                                <div class="dropzone-desc">
                                  <i class="glyphicon glyphicon-download-alt"></i>
                                  <p>광고 이미지 선택 or 드래그해 옮겨 오세요.</p>
                                </div>
                                <input type="file" name="img_logo" class="dropzone">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">닉네임/이름</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="닉네임/이름">
                            <label for="exampleInputEmail1">연락처</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="핸드폰 번호">
                            <label for="exampleInputEmail1">구매희망 면적</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="ex) 10 x 10 OR 100x100 ">
                        </div>
                    </form>
                

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                <button type="submit" class="btn btn-dark">적용하기</button>
              </div>
            </div>
          </div>
        </div>
        <div>
        <canvas id="myBoard" width="1440" height="1200"></canvas>
      </div>


  </hr>

  <footer>
          <p>© 2021 Nune Project</p>
  </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="./assets/js/mainBoard.js"></script>
    <script type="text/javascript" src="./assets/js/drag_field.js"></script>
</body>

Answer 1

出现此问题是因为 range 函数在 end > start 时未清除方块。清除这两种情况下的方块即可解决问题。

这是解决问题的代码段。

function range(start, end) {
  var ans = [];
  emptySquare(context);
  if (end > start) {
    for (let i = start; i <= end; i += 10) {
        ans.push(i);
    }
  } else {
    for (let i = start; i >= end; i -= 10) {
        ans.push(i);
    }
  }
  return ans;
}

延迟问题

附加到 mousemove 的回调函数在每次调用时清除并绘制正方形 - 这是一项耗时的操作。鉴于 JavaScript 是单线程的，并且此函数的调用率非常高，这可能是延迟的原因。

Debouncing mousemove 回调可以帮助减少延迟。

Answer 2

另一种解决延迟问题的方法是制作两个 canvases：一个用于背景网格线，另一个用于绘制绿色矩形。

<div>
  <canvas id="bg" width="1440" height="1200"></canvas>
  <canvas id="myBoard" width="1440" height="1200"></canvas>
</div>

设置 #bg canvas 使 #myBoard 在其前面：

#bg {
  position: absolute;
  z-index: -1;
}

然后在#bg上绘制网格线 canvas:

const bg = document.getElementById('bg')
const bgContext = bg.getContext('2d')
drawBoard(bgContext)

最后，将emptySquare(context)函数移动到mousemove事件回调中，编辑如下：

function emptySquare(context) {
  context.clearRect(0, 0, canvas.width, canvas.height)
}

所以它只会清除 #myBoard canvas 而 #bg 保持不变而不需要每次都重新绘制。

示例：

const bg = document.getElementById('bg')
const bgContext = bg.getContext('2d')
drawBoard(bgContext)



function getSquare(canvas, evt) {
  var rect = canvas.getBoundingClientRect()
  return {
    x: 1 + (evt.clientX - rect.left) - ((evt.clientX - rect.left) % 10),
    y: 1 + (evt.clientY - rect.top) - ((evt.clientY - rect.top) % 10),
  }
}

function emptySquare(context) {
  context.clearRect(0, 0, canvas.width, canvas.height)
}

function range(start, end) {
  var ans = []
  if (end > start) {
    for (let i = start; i <= end; i += 10) {
      ans.push(i)
    }
  } else {

    for (let i = start; i >= end; i -= 10) {
      ans.push(i)
    }
  }
  return ans
}

function drawBoard(context) {
  for (var x = 0.5; x < 20001; x += 10) {
    context.moveTo(x, 0)
    context.lineTo(x, 20000)
  }

  for (var y = 0.5; y < 20001; y += 10) {
    context.moveTo(0, y)
    context.lineTo(20000, y)
  }

  context.strokeStyle = '#ddd'
  context.stroke()
}

function fillSquare(context, x, y) {
  context.fillStyle = '#70B7B5'
  context.fillRect(x, y, 9, 9)
}

var canvas = document.getElementById('myBoard')
var context = canvas.getContext('2d')
var isDrag = false

canvas.addEventListener('mousedown', function(evt) {
  var mousePos = getSquare(canvas, evt)
  isDrag = true
  fillSquare(context, mousePos.x, mousePos.y)
  previousPos = mousePos
}, false)

canvas.addEventListener('mousemove', function(evt) {
  if (isDrag) {
    var mousePos = getSquare(canvas, evt)
    var x_dist = range(previousPos.x, mousePos.x)
    var y_dist = range(previousPos.y, mousePos.y)

    emptySquare(context)

    for (x in x_dist) {
      for (y in y_dist) {
        fillSquare(context, x_dist[x], y_dist[y])
      }
    }
  }
}, false)

canvas.addEventListener('mouseup', function(evt) {
  if (isDrag) {
    isDrag = false
  }
}, false)

#bg {
  position: absolute;
  z-index: -1;
}

<div>
  <canvas id="bg" width="1440" height="1200"></canvas>
  <canvas id="myBoard" width="1440" height="1200"></canvas>
</div>

HTML javascript, canvas中的拖动方法

HTML javascript, dragging method in canvas

html

javascript

drag

web

bootstrap-5