使用固定大小的元素填充区域

Question

我正在创建一个应用程序来计算特定屋顶上可以安装多少太阳能电池板。

用户可以输入屋顶的尺寸。 我们只提供一定尺寸的太阳能电池板。

我认为画布是要走的路，但我似乎找不到我需要的信息..

要求

1) 根据用户的输入，应该调整画布的大小（目前我在画布内有一个矩形更改为这个大小）

2) 用户应该能够创建（和大小）放置在屋顶上的对象（烟囱、窗户等）

3) 应在画布上自动绘制基于剩余空间的太阳能电池板（矩形）

尺寸和限制

• 1px = 2cm
• 到屋顶边缘和物体的间距为 7 像素（14 厘米）
• 太阳能电池板高 169 厘米，宽 102 厘米

我查看了 fabric.js 库，但似乎找不到与我需要的内容相近的东西。

到目前为止我绘制画布的js：

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

var width=50;
var height=35;
var $width=document.getElementById('width');
var $height=document.getElementById('height');

var paneelWidth=101;
var peneelHeight=170;

$width.value=width;
$height.value=height;

draw();

$width.addEventListener("keyup", function(){
    width=this.value/2;
    draw();
}, false);

$height.addEventListener("keyup", function(){
    height=this.value/2;
    draw();
}, false);


function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.fillRect(10,10,width,height)
}

更新

画布现在会根据用户输入以动态方式调整大小。

我还发现了函数 createPattern()，它让我更接近解决方案。

我已添加此代码以在画布中生成太阳能电池板图案：

function placepanels(direction) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var img = document.getElementById("paneel");
  var pat = ctx.createPattern(img, direction);

  var w2 = canvas.width - 7;
  var h2 = canvas.height - 7;

  ctx.rect(7, 7, w2, h2);
  ctx.fillStyle = pat;
  ctx.fill();
}

宽度和高度上的 -7 是因为我需要在每个尺寸的画布上留出 14 厘米的空间。因此，为什么我从左侧和顶部偏移包含图案 7px 的矩形。目前无法在右侧和底部实现这一点。

当前问题

我得到的结果看起来不正确，看起来图案重复错误（重复次数过多），或者没有得到正确尺寸的图像来重复。

更新小提琴：https://jsfiddle.net/8e05ghqy/3/

Answer 1

至于画布调整大小，这个函数可以做到：

changeCanvasSize = function( width, height ) {
    $('canvas').width(width)
    $('canvas').height(height)
}

使用示例：changeCanvasSize(450,250) 将画布大小更改为宽度为 450 像素，高度为 250 像素。 我只是调整 HTML <canvas> 元素 .width( value ) 和 .height( value ) 的大小适用于任何 HTML 元素。