☰

» »

Canvas risanje črt - beginPath()

Canvas risanje črt - beginPath()

marjan_h ::

HTML5 + jQuery + javascript.

Uporabljam Canvas iz HTML5 in rišem črte na platno. Ko kliknem gumb id = zakljuci, mi poveže prvo koordinato in zadnjo, ter tako nastane poljuben lik. 

var canv = $("#myCanvas")[0];
var ctx = canv.getContext("2d");

$("#zakljuci").click(function(event)
	{
		if (drugiX != null && drugiY != null)
		{
			ctx.moveTo(zacX,zacY);
			ctx.lineTo(drugiX,drugiY);
                    ctx.closePath();
			ctx.fillStyle = vsebina;
			ctx.stroke();
			
		}
	});

ctx.beginPath();

//tukaj rišem črte
//polno if in else stavkov


Torej začnem risati na platno, z ctx.beginPath(), tam kjer je polno else in if stavkov samo preverja, tako da se vedno povezujejo črte. Potem ko kliknem na gumb kliče uno funkcijo zgoraj in vse skupaj se konča z ctx.closePath().

Po tem kar je napisano bi moralo zafilati poljuben lik z barvo "vsebina". Vendar se ne.

Kako rešiti težavo?

Hvala za pomoč.
  • spremenil: marjan_h ()

matonson ::

Za fillStyle dodaj še ctx.fill().

marjan_h ::

Pa res sem pozabil, vendar še vedno ne deluje!

Sedaj je tako:

var canv = $("#myCanvas")[0];
var ctx = canv.getContext("2d");
 
$("#zakljuci").click(function(event)
    {
        if (drugiX != null && drugiY != null)
        {
            ctx.moveTo(zacX,zacY);
            ctx.lineTo(drugiX,drugiY);
            ctx.closePath();
            ctx.fillStyle = vsebina;
            ctx.fill();
            ctx.stroke();
             
        }
    });
 
ctx.beginPath();
 
//tukaj rišem črte
//polno if in else stavkov

Mipe ::

...

ctx.beginPath() je deklaracija, začetek, po katerem daš navodila.
Šele ctx.stroke() izvede ta navodila.

Daj ctx.beginPath pred ctx.moveTo!

marjan_h ::

Saj je teoretično pred njim, samo v kodi ni. Tista funkcija se izvede na koncu ko kliknem gumb.

matonson ::

Nima veze kje je beginPath, saj ni znotraj funkcije. Pri zaključku sploh ne rabiš začetne in končne koordinate, saj je za to namenjena closePath funkcija. Ti izpiše kakšen error?

marjan_h ::

Aja, jaz sem čisto narobe delal.

Sedaj je manj balasta, vendar mi sedaj niti črt noče risati.

        //globalne spremenljivke
        var zacetek = true;


	$("#zakljuci").click(function(event)
	{
		ctx.closePath();
		ctx.stroke();
	
	});

	else if ($("input[@name='lik']:checked").val() == 'crta')
	{
		ctx.beginPath();
		if (zacetek)
		{
			ctx.moveTo(x,y);
			zacetek = false;
		}
		else{
			ctx.lineTo(x,y);
		}
	}


x in y dobim takrat ko kliknem na canvas. In DELA pravilno, saj mi ostale stvari riše lepo.

Mipe ::

Kje je if pred else?

marjan_h ::

ne, to sem samo kopiral dele kode, celotne ne bom ker je zelo dolga.

Tisto na začetku je samo funkcija ko klikneš gumb zakljuci, se izvede.

Tisti else if stavek je pa znotraj druge funkcije, ki se imenuje canvas_risanje in ko klikneš na canvas dobiš x in y, ter izvede se ustrezni else if.

V tem primeru ta k ga vidiš.

matonson ::

Pri #zakljuci naj bo naslednje(si me narobe zastopil):

ctx.closePath();
ctx.fillStyle = "barva";
ctx.fill();
ctx.stroke();

+ če boš dal za else (20. vrstica) takole:

ctx.lineTo(x,y);
ctx.fillStyle = "barva";
ctx.fill();
ctx.stroke();

ti bo sproti izrisovalo.

marjan_h ::

Če tudi dam te vrstice, mi noče niti črt izrisati. Ne razumem zakaj, sej dobi x in y ko kliknem. Vse bi moralo delovati.

matonson ::

Kako pa dobiš x,y?

marjan_h :: 

x = event.pageX - $("#myCanvas").offset().left;
y = event.pageY - $("#myCanvas").offset().top;

else if ($("input[@name='lik']:checked").val() == 'crta')
{
    ctx.beginPath();
    if (zacetek)
    {
        ctx.moveTo(x,y);
        zacetek = false;
    }
    else{
        ctx.lineTo(x,y);
    }
}


Tole se nahaja znotraj funckije myCanvas. Drugače pa tole dela lepo, mi normalno riše kroge.

matonson ::

Ja tole bi moralo delat. Ne vem več kaj bi bilo narobe. Meni tale varianta deluje, malo preglej:

<html>
    
    <head>
        <script type="text/javascript" src="jquery.js" /></script>        
    </head>  
	
    <body>
		<canvas id="canvas" width="500" height="500"></canvas><br>
		<input type="button" value="Zakljuci" onClick="zakljuciLik()" />

        <script type="text/javascript">
		
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            var zakljuci = true;

			context.beginPath();
            

            $("#canvas").click(function (e) {
                var x = e.pageX - $("#canvas").offset().left;
                var y = e.pageY - $("#canvas").offset().top;

                if (zakljuci) {
                    context.moveTo(x, y);
                    zakljuci = false;
                } else {

                    context.lineTo(x, y);
                    context.fillStyle = "red";
                    context.fill();
                    context.stroke();
                }
            })
			
			function zakljuciLik() {

                context.closePath();
                context.fillStyle = "red";
                context.fill();
                context.stroke();

            }
			
        </script>
        
    </body>
	
</html>

marjan_h ::

Najlepša hvala matonson, sem opazil da sem znotraj funkcije deklariral ctx.beginPath().

Sedaj sem tvojo kodo popravil tako da lahko rišeš več likov in dodajaš polnila.

Edino le zanima me kako bi naredil da ko narišeš več likov, da se napolni z rdečo barvo samo zadnji. Ker sedaj dela tako da se napolnijo vsi. Ker ko rečeš context.fill, nikoli ne poveš na katerega se nanaša.


Koda:
<html>
     
    <head>
        <script type="text/javascript" src="jquery.js" /></script>       
    </head> 
     
    <body>
        <canvas id="canvas" width="500" height="500"></canvas><br>
        <input type="button" value="Zakljuci" onClick="zakljuciLik()" />
		<input type="button" value="Napolni" onclick="napolni()" />
 
        <script type="text/javascript">
         
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            var zakljuci = true;
 
            context.beginPath();
             
 
            $("#canvas").click(function (e) {
                var x = e.pageX - $("#canvas").offset().left;
                var y = e.pageY - $("#canvas").offset().top;
 
                if (zakljuci) {
                    context.moveTo(x, y);
                    zakljuci = false;
                } else {
 
                    context.lineTo(x, y);
                    context.stroke();
                }
            })
             
            function zakljuciLik() {
 
                context.closePath();               
                context.stroke();
				zakljuci = true;
 
            }
			
			function napolni(){
			
				context.fillStyle = "red";
                context.fill();					
			}
        </script>
         
    </body>
     
</html>

matonson ::

Pri meni se beginPath izvede samo enkrat in je zato mišljeno, da je vse skupaj kot en lik. Če pa hočeš pobarvat samo zadnjega oz. vsakega posebej pa moraš to funkcijo prestaviti.

if (zakljuci) {
					context.beginPath();
                    context.moveTo(x, y);
                    zakljuci = false;

marjan_h ::

nenavadno, včeraj mi pa ni delovalo ko sem imel znotraj if-a.

No dobr, sedaj deluje. Hvala.

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Android zamenjava pogledov

Oddelek: Programiranje		61075 (896) c00L3r
»

android črta

Oddelek: Programiranje		412395 (1666) g333kk
»

Potrebujem javascript pomoč

Oddelek: Programiranje		81212 (962) no1pheeew
»

JavaScript zunaj HTML

Oddelek: Izdelava spletišč		111271 (1169) *wolf*
»

[C++] preprosto risanje

Oddelek: Programiranje		71660 (1537) popec

Več podobnih tem