[js/canvas] ronde hoeken maken met canvas

[Verwijderd]

Ik was een beetje aan het experimenteren met canvas en toen leek het mij wel grappig om aan een plugin voor jquery te werken om ronde hoeken te maken op een element.

Het enigste wat mij niet lukt is de hoek rechts onder te maken. De functie bezierCurveTo() maakt de 'bocht' verkeerd, om het maar zo te zeggen

Het gaat dus om deze functie die de canvas elementen tekent:

JavaScript:

//Gebruik code=js voor kleurtjes ;)
function drawShape(canvas,radius,r_type) {

          // use getContext to use the canvas for drawing
          var ctx = canvas.getContext('2d');
          
          if (r_type == 'tl') {
            var steps = new Array(0,0,radius,0,radius,0,0,radius,0,0);
          } else if (r_type == 'tr') {
            var steps = new Array(radius,0,radius,radius,radius,0,0,0,0,0);
          } else if (r_type == 'bl') {
            var steps = new Array(0,radius,radius,radius,0,radius,0,0,0,radius);
          } else if (r_type == 'br') {
            var steps = new Array(radius,radius,radius,0,radius,0,0,radius,radius,radius);
          }
          
          
          ctx.fillStyle = "red";
          ctx.beginPath();
          ctx.moveTo(steps[0],steps[1]); // leftop (for top left image)
          ctx.lineTo(steps[2], steps[3]); // righttop
          ctx.bezierCurveTo(steps[4], steps[5], 0, 0, steps[6], steps[7]); // curve from righttop to leftbottom
          ctx.lineTo(steps[8], steps[9]); // righttop
          ctx.stroke();
          //ctx.fill();
          

      }

Om te zien wat ik bedoel met je dit eff downloaden:
http://s21.quicksharing.com/d/7115664/1181369073/canvas.zip

Weet iemand wat ik verkeerd doe, waardoor bezierCurveTo() de bocht 'naar buiten toe' neemt rechtsonder?

[ Voor 2% gewijzigd door BtM909 op 09-06-2007 17:51 ]

[Verwijderd]

Ik denk dat je hier wel weer mee vooruit kan, 'k ben hier zelf ook niet zo'n kei in, maar ik zag wel waar het probleem lag. Verder hoop ik dat je er wat mee kunt...

JavaScript:

//Gebruik code=js voor kleurtjes ;) 

    function drawShape(canvas,radius,r_type) {

          // use getContext to use the canvas for drawing
          var ctx = canvas.getContext('2d');
          
          if (r_type == 'tl') {
            var steps = new Array(0,0,radius,0,radius,0,0,radius,0,0);
          } else if (r_type == 'tr') {
            var steps = new Array(radius,0,radius,radius,radius,0,0,0,0,0);
          } else if (r_type == 'bl') {
            var steps = new Array(0,radius,radius,radius,0,radius,0,0,0,radius);
          } else if (r_type == 'br') {
            var steps = new Array(radius,radius,radius,0,radius,0,0,radius,radius,radius);
          }
          
          
          ctx.fillStyle = "red";
          ctx.beginPath();
          ctx.moveTo(steps[0],steps[1]); // leftop (for top left image)
          ctx.lineTo(steps[2], steps[3]); // righttop
    if(r_type == 'br') // Hier dus
        ctx.bezierCurveTo(steps[4], steps[5], radius, radius, steps[6], steps[7]); // curve from righttop to leftbottom
    else
        ctx.bezierCurveTo(steps[4], steps[5], 0, 0, steps[6], steps[7]); // curve from righttop to leftbottom
          ctx.lineTo(steps[8], steps[9]); // righttop
          ctx.stroke();
          //ctx.fill();
          

      }


    jQuery.fn.roundedCorners = function(radius) {
        
        return this.each(function() {
            var c_top = '<canvas class="topleft" width="'+radius+'px" height="'+radius+'px"></canvas><canvas class="topright" width="'+radius+'px" height="'+radius+'px"></canvas>';
            var c_bottom = '<canvas class="bottomleft" width="'+radius+'px" height="'+radius+'px"></canvas><canvas class="bottomright" width="'+radius+'px" height="'+radius+'px"></canvas>';
            this.innerHTML = c_top+this.innerHTML+c_bottom;
            $(this).css('position','relative');
            drawShape($(this).children(".topleft").get(0),radius,'tl');
            drawShape($(this).children(".topright").get(0),radius,'tr');
            drawShape($(this).children(".bottomleft").get(0),radius,'bl');
            drawShape($(this).children(".bottomright").get(0),radius,'br');
            
        });  
    }

[ Voor 0% gewijzigd door BtM909 op 09-06-2007 17:52 ]

[Verwijderd]

Dankje HellCaster.

[RobIII]

Verwijderd schreef op zaterdag 09 juni 2007 @ 17:31:
Ik denk dat je hier wel weer mee vooruit kan, 'k ben hier zelf ook niet zo'n kei in, maar ik zag wel waar het probleem lag. Verder hoop ik dat je er wat mee kunt...

Hoewel het goed bedoeld is bij deze toch het vriendelijke verzoek voortaan niet (meteen) een voorgekauwde oplossing aan te dragen. Mensen die iets willen leren kunnen dan ook nog iets leren. En leg dan op z'n minst even uit wat je hebt gedaan en waarom.

Niets aan de hand verder, ik zeg het maar even: je kunt iemand die honger heeft beter leren vissen dan een vis geven.

[Verwijderd]

Nee, sorry, heb je helemaal gelijk in. Ik zal het proberen uit te leggen:

De lijn die je wilt trekken word gezien als een vector. Bij een rechte lijn worden er co'ordinaten meegegeven van waar tot waar de lijn moet lopen. Echter bij een gebogen lijn, moeten er ook nog zogenaamde 'control points' bij worden getekend. Zo kun je de gewenste richting meegeven aan de kromming. In een voorbeeld hieronder kun je zien wat het effect daarvan kan zijn. Deze punten worden niet weergegeven bij de echte tekening zoals jij het op je scherm ziet.



Ik hoop dat het voldoende uitleg is, zoals ik al zei, ik ben hier ook niet al te goed in. Om nog terug te komen over uitleg over een script: In een community waar ik bij zit wordt er meestal een stukje code als oplossing gegeven, en dan kom je er meestal zelf wel achter hoe het moet. "Oow, zo moest het!". Dit is voor mij ook nieuw, dus hiervoor mijn excuus.