固定尺寸元件填充区

Question

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

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

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

需求

1)根据用户的输入，应调整画布的大小(目前，画布中有一个矩形更改为此大小)

2)用户应该能够创建(和大小)对象放在屋顶上(烟囱，窗口，.)

3)基于开放空间，在画布上自动绘制太阳能电池板(矩形)。

维数和限制

• 1px = 2cm
• 屋顶和物体边缘的间距为7 7px (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 of和高度250 of。我只是调整HTML元素的大小，<canvas>元素.width( value )和.height( value )适用于任何HTML元素。