고정 크기 요소로 채우기 영역

Question

특정 지붕에 얼마나 많은 태양 전지판이 들어갈 수 있는지 계산하는 응용 프로그램을 만들고 있습니다.

사용자는 지붕의 치수를 입력 할 수 있습니다. 우리는 사용할 수있는 크기의 태양열 패널 만 있습니다. 캔버스가해야 사용자의 입력을 기반으로

나는 캔버스가 있지만 내가 필요한 정보를 찾을 수가 없습니다가는 방법이라고 생각

..

요구 사항

1) 크기를 조정할 수 (현재 나는 캔버스 내부의 사각형이 크기에 변화가)

2) 사용자 지붕 (굴뚝, 창, ..)

을 넣어 객체를) 만들 수 (및 크기 여야합니다 3) B ased이 개방 공간에 남아있는 태양 전지 패널 (사각형)을를 automaticly 캔버스

치수 및 제한에 그려 져야 지붕 객체의 가장자리 1 픽셀 = 2cm

간격

• 는 7px (14cm이고 나는 fabric.js 라이브러리를 체크 아웃했지만 찾을 수가 없습니다

)

태양 전지 패널은 169cm의 높이와 너비 102cm입니다 내가 필요한 것에 가깝다. 나는 캔버스를 그리는 지금까지 가지고

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 나는 캔버스의 각 크기 14cm 공간이 필요 beacause를 폭과 높이에 있습니다. 따라서 왜 왼쪽과 위의 패턴 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) 및 HTML 요소에 대한 .height(value) 작품의 크기를 조정하고있다.