как вписать рисунок холста в окно холста - PullRequest
Новая
       0

как вписать рисунок холста в окно холста

1 голос
/ 16 января 2020 

	var $canvasDiv = $('#canvasdiv');
	var canvas = document.getElementById("mycanvas");
	var c = canvas.getContext("2d");
	var c1 = canvas.getContext("2d");
	canvas.height = $canvasDiv.innerHeight();
	canvas.width = $canvasDiv.innerWidth();
	c.font = "15px Arial";
	
function degToRad(angle){
	var pi = Math.PI;
    return angle * (pi/180);
}
	
function crtanjeGrede(l)
{
	var oslonac1 = parseInt(l) + 30;

	c.beginPath();
	c.fillRect(30,30,l,5); //pravougaonik koji pocinje na x30 y30, duzine l koja je unos i debljine 5

	c.beginPath();
	c.moveTo(oslonac1,35);
	c.lineTo(oslonac1 + 25,45);
	c.lineTo(oslonac1 - 25,45);
	c.lineTo(oslonac1,35);
	c.moveTo(oslonac1 + 25, 50);
	c.lineTo(oslonac1 - 25, 50);
	c.stroke();
	
	c.beginPath();
	c.moveTo(30,35);
	c.lineTo(55,45);
	c.lineTo(5,45);
	c.lineTo(30,35);
		
	c.moveTo(30, 70);
	c.lineTo(30, 400);
	c.moveTo(oslonac1 , 70);
	c.lineTo(oslonac1 , 400);
	
	c.moveTo(30, 120);
	c.lineTo(oslonac1, 120);
	c.fillText("Fa",5,124);
	
	c.moveTo(30, 190);
	c.lineTo(oslonac1,190);
	c.fillText("Ft",5,194);
	
	c.moveTo(30, 270);
	c.lineTo(oslonac1, 270);
	c.fillText("Ma",5,274);
	
	c.closePath();
	c.strokeStyle = 'black';
	c.stroke();
	
}

// ako je pravac true znaci da je po Y, false je po x
// ako je smer true znaci da je na poz stranu, false je na negativnu
function crtanjeSile(n, pravac, smer)
{
		//pravac
	if (pravac){
		var naptka = parseInt(n) + 30;
		if (smer){
			c.beginPath();
			c.moveTo(naptka , 24);
			c.lineTo(naptka + 3, 16);
			c.lineTo(naptka - 3 , 16);
			c.lineTo(naptka , 24);
			c.fillStyle ="#000000";
			c.fill();
			
			c.beginPath();
			c.moveTo(naptka , 0);
			c.lineTo(naptka , 25);
			c.stroke();
			c.closePath();
			
		} else {
			c.beginPath();
			c.moveTo(naptka , 41);
			c.lineTo(naptka + 3, 49);
			c.lineTo(naptka - 3 , 49);
			c.lineTo(naptka , 41);
			c.fillStyle ="#000000";
			c.fill();
			
			c.beginPath();
			c.moveTo(naptka, 41);
			c.lineTo(naptka, 66);
			c.stroke();
			c.closePath();
		}
		
	}else{

}}
	
function crtanjeSile1(b, pravac1, smer1){	
	if(pravac1){
		var naptka = parseInt(b) + 30;
		if(smer1 == false){ //treba samodorada da li se sila crta iznad ili ispod X ose
		//var naptka = parseInt(n) + 30;
			c.beginPath(); //strelica nadesno
			c.moveTo(naptka - 1, 25);
			c.lineTo(naptka - 9, 22);
			c.lineTo(naptka - 9, 28);
			c.lineTo(naptka - 1, 25);
			c.fillStyle ="#000000";
			c.fill();
			
			c.beginPath();
			c.moveTo(naptka - 1, 25);
			c.lineTo(naptka - 26, 25);
			c.strokeStyle = 'black';
			c.stroke();
			c.closePath()
		}else{
			c.beginPath(); //strelica u levo
			c.moveTo(naptka + 1 , 40);
			c.lineTo(naptka + 9 , 37);
			c.lineTo(naptka + 9 , 43);
			c.lineTo(naptka + 1 , 40);
			c.fillStyle ="#000000";
			c.fill();
			
			c.beginPath();
			c.moveTo(naptka + 1, 40);
			c.lineTo(naptka + 26, 40);
			c.stroke();
			c.closePath();
		}
	}else{
		c.beginPath();
		c.closePath();
	}
}

//crtanje gerbera je bilo ovde
	
function aksijalnesile(l, a, intX, X){ //crtanje aksijalnih sila
	var polaznatka = parseInt(l) + 30;
	var duzina = parseInt(a) + 30;
	
	if(pravac1){
		if(smer1){
			c.beginPath();
			c.moveTo(polaznatka, 120);
			//c.fillRect(polaznatka,120,duzina - polaznatka, -10);		ova funkcija radi isto
			c.lineTo(polaznatka, 110); 
			c.lineTo(duzina, 110);
			c.lineTo(duzina, 120); 
			c.closePath();
			c.fill();
			c.textAlign = 'center';
			c.fillText(intX.toFixed(2), polaznatka, 105);
			c.textAlign = 'end';
			c.fillText(intX.toFixed(2), duzina - 2, 105);
			c.stroke();
		}else{
			c.beginPath();
			c.moveTo(polaznatka, 120); 
			c.lineTo(polaznatka, 130);
			c.lineTo(30, 130);
			c.lineTo(30, 120);
			c.closePath();
			c.fill();
			c.textAlign = 'center';
			c.fillText(intX.toFixed(2), polaznatka, 145);
			c.textAlign = 'start';
			//c.fillText(intX.toFixed(2), 30 + 1, 135);
			c.stroke();
		}
		}else{ 
		
		}
}

function transverzalnesile(l, a, intY, Y){ //crtanje transverzalnih sila
	var polaznatka = parseInt(l) + 30;
	var duzina = parseInt(a) + 30;
	
	if(pravac){
		if(smer){
			c.beginPath();
			c.moveTo(polaznatka, 190); 
			c.lineTo(polaznatka, 180);
			c.lineTo(30, 180);
			c.lineTo(30, 190);
			c.closePath();
			c.fill();
			c.textAlign = 'center';
			c.fillText(intY.toFixed(2), polaznatka, 215);
			c.textAlign = 'start';
			//c.fillText(intX.toFixed(2), 30 + 1, 135);
			c.stroke();
		}else{
			c.beginPath();
			c.moveTo(polaznatka, 190);
			//c.fillRect();		ova funkcija radi isto
			c.lineTo(polaznatka, 180); 
			c.lineTo(duzina, 180);
			c.lineTo(duzina, 190); 
			c.closePath();
			c.fill();
			c.textAlign = 'center';
			c.fillText(intY.toFixed(2), polaznatka, 175);
			c.textAlign = 'end';
			c.fillText(intY.toFixed(2), duzina - 2, 175);
			c.stroke();
		}
		}else{ 
		
		}
}


$("#sub").click(function() {
	//debugger;
	
	var duzina = $("#Duzina").val();
	var inten = $("#inten").val();
	var naptka = $("#naptka").val();
	var napugao = $("#napugao").val();
	var gerber1 = $("#gerber1").val();
	var gerber2 = $("#gerber2").val();
	
	var inten = parseInt(inten , 10);
	var napugao = parseInt(napugao, 10 );
	var intX = inten * Math.cos(degToRad(napugao)).toFixed(3); // funkcija .toFixed() zaokruzuije na 3 decimale da bi sin 0 bio 0, a ne !=0
	if (intX !== 0){
		pravac1 = true;
		if (intX > 0){
			smer1 = true;
		}else{
			smer1 = false;	
		}
	}else{
		pravac1 = false;
	}
	crtanjeSile1(naptka, pravac1, ); //skinut parametar smer1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	
	var intY = inten * Math.sin(degToRad(napugao)).toFixed(3); // funkcija .toFixed() zaokruzuije na 3 decimale da bi sin 0 bio 0, a ne !=0
	if (intY !== 0){
		pravac = true;
		if (intY > 0){
			smer = true;
		}else{
			smer = false;	
		}
		//crtanjeSile(naptka, pravac, smer);
	}else{
		pravac = false;
	}
	crtanjeSile(naptka, pravac, smer);

	var Y = inten * Math.sin(degToRad(napugao)).toFixed(3);
	var X = inten * Math.cos(degToRad(napugao)).toFixed(3);
	
	var a = parseInt(naptka) + 30;
	
	function move(y, naptka)
{
    c.beginPath();
    c.moveTo(naptka + 30, y + 50);
    c.lineTo(naptka + 50, y + 50);
    c.stroke();
}
		

	
	crtanjeGrede(duzina);
	move(Y, naptka);
	aksijalnesile(naptka, duzina, intX, X);
	transverzalnesile(naptka, duzina, intY, Y);
	
	
});
* {
    margin: 0;
    padding: 0;
}

#logo{
	border-radius: 10px;
	padding: 1px;
}

.gore{
	background-color: black;
	width: 100%;
	padding: 3px;
	color: white;
	margin: 0;
	margin-top: 0;
	
}

.unos{
	margin-top: 20px;
	padding: 3px;
	width: 80%;
	margin: 0 auto;
	height: auto;
}

.unos2{
	margin-top: 20px;
}

form{
	width: 500px;
	margin: 0 auto;
}

.imput{
	width= 100%;
}

.forma{
	padding: 3px;
}

input{
	margin-top: 4px;
}

.floutleft{
	display: block;
	margin: 0 auto;
	
}

.sire{
	width: 300px;
}

.tr{
	width: 150px;
}

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
}
<head>

<link rel="stylesheet" href="css.css">

</head>

<body>
    <div class="gore">
        <img src="logo.jpg" id="logo" alt="logo masinca" width="60" height="60">
    </div>
    
	
<center>
	<form action="" class="unos">
		<table class="unos2">
				<tr><td style>duzina grede [mm]:</td> <td><input type="text" name="Duzina" id="Duzina" placeholder="duzina grede" ></td></tr>
				<tr><td>intenzitet sile [N]:</td> <td><input type="text" name="inten" id="inten" placeholder="intenzitet sile"></td></tr>
				<tr><td>napadna tacka [mm]:</td> <td><input type="text" name="naptka" id="naptka" placeholder="napadna tacka" ></td></tr>
				<tr><td>napadni ugao [°]:</td> <td><input type="text" name="napugao" id="napugao" placeholder="napadni ugao" ></td></tr>
		</table>	
		<table>
				<td><input class="" type="button" name="sub" id="sub" value="Draw" class="imput"></td>
		</table>
	</form>
	
<div id="canvasdiv" class="unos3" style="margin: 5px; height: 80%; width: 80%;">
    <canvas id="mycanvas" style="border: none;"></canvas>
</div>


</center>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript" src="script.js"></script>
</body>

Мне нужна помощь в подборе изображения по ширине холста на странице html. Я определил ширину холста 100%, но ширину div 80% (см. рисунок), и изображение внутри холста определяется пользователем в HTML.

Рисунок может иметь ширину 10 пикселей, но также может быть 1000 пикселей и я хочу разместить его внутри желаемого холста, чтобы он мог быть виден на любой определенной ширине (не слишком маленькой, но не настолько большой, чтобы go превышала желаемую ширину, как показано на втором рисунке)

первое изображение

второе изображение

было бы лучше, если бы я мог выполнять масштабирование отдельно, чтобы я мог фиксировать размер боковых элементов (округлено красным цветом на третьем рисунке) и используется только для синего элемента (см. третий пи c).

третье изображение

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...