Question

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

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

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

要求

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

2）用户应该能够创建（和大小）放在屋顶上的物体（烟囱，窗户......）

3）基于开放空间，左侧太阳能电池板（矩形）应自动绘制在画布上

尺寸和限制

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

我已经检查了fabric.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)会将画布大小更改为450px的宽度和250px的高度。我只是调整HTML <canvas>元素的大小.width( value )和.height( value )适用于任何HTML元素。

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

1 个答案: