在画布上从点阵列中绘制多个形状

如何解决在画布上从点阵列中绘制多个形状

我有一个带有画布的html页面，该页面连接到Web服务器并接收需要在画布上绘制的一些点数组。

建立连接后，我得到一个形状作为主模板。在整个会话过程中，它将保持不变。然后我得到其他形状。

我的问题是我无法弄清楚如何只绘制一次主要形状（模板），然后轻松地绘制和清洁画布上的其他形状。这是我的申请流程：

1-绘制主模板形状 2-当新形状到达时，将其绘制在画布上（不清除已绘制的模板） 3-当新的形状到达时，绘制较旧的形状（不是模板）并绘制新形状

我只需要绘制一次第一个模板，因为我得到了大量的点，并且对它们进行耗时的计算。我不想每次出现新形状时都重新绘制此模板...

是实现这一目标的一种方法吗？它也应该考虑页面调整大小等。

我准备了下面的最小示例来模拟我的需求...

// Main template shape
let template = [{x: 10,y:10},{x: 120,{x: 110,y:110},{x: 50,y:175}];

// Some shapes
let shapes = [
    [{x: 20,y:20},{x: 100,y:100},{x: 60,y:145}],[{x: 30,y:30},{x: 90,y:90},{x: 70,y:135}],[{x: 40,y:40},{x: 80,y:70},y:125}],];

let shapeIndex = 0; // To cycle through shapes array

let canvas = {}; // Canvas to draw on
let ctx = {}; // Context of the Canvas

// Init elements
$( document ).ready(function() {
    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
});

// Draw the template
function drawTemplate() {
    ctx.save();

    ctx.beginPath();
    ctx.strokeStyle = 'yellow';
    ctx.fillStyle = 'red';
    for(let point of template) {
        ctx.lineTo(point.x,point.y);
    }
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    ctx.restore();
}

// Draw one shape from the shapes array
function drawShape() {
    ctx.save();

    ctx.strokeStyle = 'white';
    ctx.fillStyle = 'rgba(127,127,0.5)';
    ctx.beginPath();

    let points = getShapeFromArray();
    for(point of points) {
        ctx.lineTo(point.x,point.y);
    }
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    ctx.restore();
}

// Draw one shape from the shapes array
function drawShape() {

    // How to clear the perviously drawn shape,if any?

    ctx.save();

    ctx.strokeStyle = 'white';
    ctx.fillStyle = 'rgba(127,point.y);
    }
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    ctx.restore();
}

// Helper to get next element in the array
function getShapeFromArray() {
    if(shapeIndex == shapes.length) {
        shapeIndex = 0;
    }
    return shapes[shapeIndex++];

}

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Hahaha!</title>
</head>

<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>
<p style="text-align: left">
    <button onclick="drawTemplate()">draw template</button>
    <button onclick="drawShape()">draw shape</button>
</p>
</body>
</html>

解决方法

@DEKKER嗨，这里是有效的解决方案

canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");

// Main template shape
let template = [{x: 10,y:10},{x: 120,{x: 110,y:110},{x: 50,y:175}];

// Some shapes
let shapes = [];
// put template first into our bucket
shapes.push( template ) ;

// helper fn.
// random int with limits
let RI = function (min,max) {
  if (max == null) { max = min; min = 0; }
  if (min > max) { var tmp = min; min = max; max = tmp; }
  return Math.floor(min + (max - min + 1) * Math.random());
}
// returns array with 3 random points
function genPoint(){
  return [ {x: RI(1,199),y: RI(1,199)},{x: RI(1,199)} ];
}



// Draw the template
function drawPoly( points,isTemplate = false ) {
  ctx.save();
  ctx.beginPath();
  ctx.strokeStyle = (isTemplate) ? 'yellow' : 'white';
  ctx.fillStyle = (isTemplate) ? 'red' : 'rgba(127,127,0.5)';
  for( let point of points ) {
    ctx.lineTo(point.x,point.y);
  }
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.restore();
}

// main logic
function drawPoint( ajaxData = false ){
  // if bucket contains more additional points (poly's)
  // draw last two poly's
  if( shapes.length > 2 ) {
    ctx.clearRect(0,canvas.width,canvas.height ); // clear canvas
    drawPoly( shapes[ shapes.length -2 ],false ); // draw last two
    drawPoly( shapes[ shapes.length -1 ],false );
  } else {
    drawPoly( shapes[ shapes.length -1 ],( shapes.length == 1 )  ) ;
  }
  // push random `genPoint` data in `shapes` array or ajaxData or whatsoever
  shapes.push( ( ajaxData ) ? ajaxData : genPoint() ); // add new point on stack
}

// draw and demo working system
setInterval( drawPoint,2000 );

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>

我将评论我添加到您的代码中的内容：

主要逻辑在function drawPoint( ajaxData = false ){..}函数中。它使用新的poly作为参数，因此您可以自动将其与ajax数据插入程序逻辑中
我仅用一个绘制函数就简化了代码-function drawPoly( points,isTemplate = false ){..}
两个简单的辅助函数RI作为随机整数，genPoint作为点生成器
已删除jQuery，因为不需要dep

在画布上从点阵列中绘制多个形状

如何解决在画布上从点阵列中绘制多个形状

解决方法

相关推荐