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

-1

我正在創建一個應用程序來計算在特定屋頂上將安裝多少太陽能電池板。使用固定大小的元素填充區域

用戶可以輸入其屋頂的尺寸。我們只有太陽能電池板的大小可用。

我想畫布是去，但我似乎還沒有找到我需要的信息的方式..

要求

1）基於用戶畫布應的輸入調整大小（目前我有在畫布中的矩形改變這個尺寸）

2）用戶應該能夠創建（和大小）對象放在屋頂（煙囪，窗戶，..）

3）B ASED的空地上左太陽能電池板（矩形）應當全自動畫布

尺寸和限制上繪製

1px的=2釐米
間距爲屋頂和對象的邊緣是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/

來源

2017-09-06 Maarten

這是非常複雜的幾何形狀的東西，現在還有一些舊約。 –

@Chris G根本不復雜...... – MarioE

你在找什麼樣的答案？，現在還不清楚。看起來你希望我們這樣做。 – MarioE

至於畫布調整大小時，該功能會做到這一點：使用的

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

實施例：changeCanvasSize(450,250)將畫布大小更改爲寬度的450像素和高度的250像素。我只是調整HTML <canvas>元素.width(value)和.height(value)適用於任何HTML元素。

來源

2017-09-06 11:07:51 MarioE

感謝您的輸入，@MarioE！我已經能夠靠近結果幾步了。我更新了開幕帖子和小提琴。 – Maarten

這不是一個答案，這是一個評論。 –

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

回答

相關問題