主页 / 问题 / 982473
Accepted
VladLion
Asked:2020-05-17 17:59:56 +0000 UTC2020-05-17 17:59:56 +0000 UTC

可见性边框和画布边框

  • 772

这样的问题：假设我们有一个玩家可以移动的位置，它很大，但是事先知道哪些物体在它上面的哪些地方。有一个玩家，我们在一定半径内看到玩家周围，但我们看不到能见度半径之外的东西。问题是如何在画布上实现这一点。在此之前，就像我以前做的那样，所有可见对象都立即绘制在可见区域上。

javascript

1 个回答

  1. Best Answer

    最简单的方法是在绘制之前对物体进行计数bounding box并检查它是否击中屏幕，尝试玩一下这个例子中的点数，找到你的计算机的性能极限，然后你就可以了解这个优化是如何影响性能的

    在此处输入图像描述

    var width, height;
var canvas = d3.select("canvas").call(d3.zoom().on("zoom", zoom));
resize();
var context = canvas.node().getContext("2d");
var randomX = d3.randomNormal(width / 2, 80);
var randomY = d3.randomNormal(height / 2, 80);
var data = d3.range(1e4).map(function() { 
    return [randomX(), randomY()]; 
});
let r1 = 1;
var transform = {x:0, y:0, k:1};

draw();

function zoom() {
  transform = d3.event.transform;
  context.save();
  context.clearRect(0, 0, width, height);
  context.translate(transform.x, transform.y);
  context.scale(transform.k, transform.k);
  draw();
  context.restore();
}

function draw() {
  var i = -1, n = data.length, d, c=0;
  context.beginPath();
  let rect = visibleRect();
  
    context.beginPath()
  context.fillStyle = 'red';
  while (++i < n) {
    d = data[i];
    
    if (inScreen(d, rect)) {
      c++;
      context.moveTo(d[0], d[1]);
      context.arc(d[0], d[1], r1, 0, 2 * Math.PI);
    }
  }
  context.fill();
  log.textContent = 'кругов нарисовано: ' + c + ', используйте drag и wheel'
}

function resize() {
  width = canvas.node().width = window.innerWidth;
  height = canvas.node().height = window.innerHeight-22;
}

function visibleRect() {
  let pad = 50;
  let x = transform.x-pad, 
      y = transform.y-pad, 
      k = transform.k,
      w = width-pad*2,
      h = height-pad*2;
      
  context.beginPath()
  context.fillStyle = 'rgba(0,0,0,0.1)';
  context.rect(-x/k, -y/k, w/k, h/k);
  context.fill();
  return [-x/k, -y/k, w/k-x/k, h/k-y/k]
}

function inScreen(d, r) {
  return d[0] > r[0]-r1 && d[1] > r[1]-r1 && d[0]<r[2]+r1 && d[1]<r[3]+r1
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body style="margin:0;overflow:hidden">
<canvas></canvas>
<div id="log"></div>
</body>

    这种方法的缺点是枚举所有元素；为避免这种情况，您将不得不使用数据结构 - 例如，四叉树

    • 4

相关问题