HTML > Canvas >Interaktiv

Interaktiv Canvas

Enkel ball | Bezier | De Casteljau algoritmen

Hva

Interaktiv canvas

Noen enkle interaktiv canvasløsninger som tegner ut en ball og en Bezier kurve med 4 kontrollpunkter, på to forskjellige måter. Løsningene er basert på KINETICSJS [1] og er inspirert av en serie eksempler i HTML5CanvasTutorials [2]

Enkel ball

Interaksjon i canvas er realisert ved hjelp av KINETICSJS [1] .

Flytt ballen med musa.

Javascriptet:

function setupCanvas() {
    var kin = new Kinetic_2d("c6");
    var canvas = kin.getCanvas();
    var context = kin.getContext();
            
    // the ball
    var ballX=canvas.width / 2;
    var ballY=canvas.height / 2;
    var ballRadius=20;
    // dragging ?
    var isDragging= false;
    
    kin.setDrawStage(function() {
        var mousePos = kin.getMousePos();
        if (isDragging) {
            ballX = mousePos.x;
            ballY = mousePos.y;
        }        
        kin.clear();
        var canvas = kin.getCanvas();
        var context = kin.getContext();
        // draw ball in a region
        kin.beginRegion();
            context.beginPath();
            context.arc(ballX, ballY, ballRadius, 0, 2 * Math.PI, false);
            context.fillStyle = "blue";
            context.fill();
            kin.addRegionEventListener("mousedown", function() {
                isDragging = true;
                var mousePos = kin.getMousePos();
            });
            
            kin.addRegionEventListener("mouseup", function(){
                isDragging = false;
            });        
        kin.closeRegion();
    });
};

Bezier

Flytt kontrollpunktene med musa

Uttrykt ved kontrollpunktene og en parameter, t, som løper mellom 0 og 1, kan vi beskrive et punkt på en kubisk Bezierkurve slik:

P(t)=(1-t)³P0+ 3t(1-t)²P1 + 3t²(1-t)P2 + t³P3

Canvas elementet har en ferdig rutiner for å tegne Bezierfunksjoner.

Javascript som administrerer controlpunkter. Et Point-objekt og en renderingrutine som tegner et punkt som en region og tilordner eventhandlere.

// package usefull for drag and drop controlpoints
var dd = {
    mouseX: 0,
    mouseY: 0,
    isDragging: false,
    pointIx: 0
};
// a Point object, representing a control point
function Point(ix,x,y,color)
{
    this.ix=ix;
    this.x=x;
    this.y=y;
    this.radius=7;
    this.color=color;
}
// establish a point as a region with eventhandlers
drawPoint=function(P,kin)
{
    var canvas = kin.getCanvas();
    var context = kin.getContext();
    
    kin.beginRegion();
        context.beginPath();
        context.arc(P.x, P.y, P.radius, 0, 2 * Math.PI, false);
        context.fillStyle = P.color;
        context.fill();
        kin.addRegionEventListener("mousedown", function() {
            dd.isDragging = true;
            dd.pointIx=P.ix;
        });
        kin.addRegionEventListener("mouseup", function(){
            dd.isDragging = false;
        });
    kin.closeRegion();
}

Javascript som startes når canvas er lastet og som setter opp det hele

// controlpoints
var p=new Array();
// called from the page
function setupBezierCanvas(canvasID) {
    var kin = new Kinetic_2d(canvasID);
    var canvas = kin.getCanvas();
    // set up initial controlpoints
    p[0]=new Point(0,20,canvas.height-50,'red');
    p[1]=new Point(1,100,50,'blue');
    p[2]=new Point(2,canvas.width-100,50,'blue');
    p[3]=new Point(3,canvas.width-50,canvas.height-50,'red');
    
    var context = kin.getContext();
    var t=0.0;
    kin.setDrawStage(function() {
        var mousePos = kin.getMousePos(); 
        if (dd.isDragging) {
            p[dd.pointIx].x = mousePos.x;
            p[dd.pointIx].y = mousePos.y;
        }
        kin.clear();
        // draw controlpoints
        for(var ix=0;ix<p.length;ix++)
            drawPoint(p[ix],kin);
        // draw bezier
        context.moveTo(p[0].x,p[0].y);
        context.bezierCurveTo(p[1].x, p[1].y, p[2].x, p[2].y,p[3].x, p[3].y);
        context.lineWidth = 3;
        context.strokeStyle = "black"; 
        context.stroke();
    });
};

De Casteljau algoritmen

Flytt kontrollpunktene eller dra slideren for å endre t

Casteljau algoritmen tar utgangspunkt i en lineær Bezier funksjon og anvender denne til å dele opp linjene mellom kontrollpunktene.

P(t)=(1-t)P0+tP1

  
A(t)=(1-t)P0+tP1
B(t)=(1-t)P1+tP2

P(t)=(1-t)A(t)+tB(t)
P(t)=(1-t)²P0+2t(1-t)P1+t²P2

A(t)=(1-t)P0+tP1
B(t)=(1-t)P1+tP2
C(t)=(1-t)P2+tP3

D(t)=(1-t)A(t)+tB(t)
E(t)=(1-t)B(t)+tC(t)

P(t)=(1-t)D(t)+tE(t)
P(t)=(1-t)³P0+3t(1-t)²P1+3t²(1-t)P2+t³P3

Javascriptet som setter opp canvas er nå slik:

// controlpoints
var cp=new Array();
// called from the page
function setupCasteljauCanvas(canvasID) {
    var kin = new Kinetic_2d(canvasID);
    var canvas = kin.getCanvas();
    // initiate controlpoints
    cp[0]=new Point(0,20,canvas.height-50,'black');
    cp[1]=new Point(1,100,100,'gray');
    cp[2]=new Point(2,canvas.width-100,50,'gray');
    cp[3]=new Point(3,canvas.width-50,canvas.height-50,'black');
    // initiate slider
    slider.centerY=canvas.height-slider.side/2;
    slider.centerX=canvas.width/2;
    slider.value=0.3;
    
    kin.setDrawStage(function() {
        kin.clear();
        var context = kin.getContext();
        var mousePos = kin.getMousePos(); 
        if (dd.isDragging) {
            cp[dd.pointIx].x = mousePos.x;
            cp[dd.pointIx].y = mousePos.y;
        }
        else if(slider.isDragging)
        {
            slider.centerX=mousePos.x;
            slider.value=mousePos.x/canvas.width;
        }
        // draw Slider
        drawslider(kin);
        // draw controlpoints
        for(var ix=0;ix<p.length;ix++)
            drawPoint(cp[ix],kin);
        // draw bezier
        context.moveTo(cp[0].x,cp[0].y);
        context.bezierCurveTo(cp[1].x, cp[1].y, cp[2].x, cp[2].y,cp[3].x, cp[3].y);
        context.lineWidth = 0.2;
        context.strokeStyle = "red"; 
        context.stroke();
        // draw Casteljau lines and P
        drawCasteljau(cp,slider.value,kin);
    });
};
function drawCasteljau(p,t,kin)
{
    var A=new Point(0,(1-t)*p[0].x+t*p[1].x,(1-t)*p[0].y+t*p[1].y,'blue');
    var B=new Point(0,(1-t)*p[1].x+t*p[2].x,(1-t)*p[1].y+t*p[2].y,'blue');
    var C=new Point(0,(1-t)*p[2].x+t*p[3].x,(1-t)*p[2].y+t*p[3].y,'blue');
    
    var D=new Point(0,(1-t)*A.x+t*B.x,(1-t)*A.y+t*B.y,'blue');
    var E=new Point(0,(1-t)*B.x+t*C.x,(1-t)*B.y+t*C.y,'blue');
    
    var P=new Point(0,(1-t)*D.x+t*E.x,(1-t)*D.y+t*E.y,'red');
    
    var dc = kin.getContext();
    dc.strokeStyle='blue';
    dc.moveTo(p[0].x,p[0].y); 
    dc.lineTo(p[1].x,p[1].y);dc.lineTo(p[2].x,p[2].y);dc.lineTo(p[3].x,p[3].y);
    dc.stroke();
    dc.moveTo(A.x,A.y); dc.lineTo(B.x,B.y);dc.stroke();
    dc.moveTo(B.x,B.y); dc.lineTo(C.x,C.y);dc.stroke();
    
    dc.moveTo(D.x,D.y); dc.lineTo(E.x,E.y);dc.stroke();
    
    dc.beginPath();
    dc.arc(P.x, P.y, P.radius, 0, 2 * Math.PI, false);
    dc.fillStyle = P.color;
    dc.fill();
}

Slideren er handtert slik:

// slider
slider={
    centerX:100,
    centerY:100,
    side:30,
    value:0.0,
    color:'green',
    isDragging:false
}
// establish a slider as a region with eventhandlers
drawslider=function(kin)
{
    var canvas = kin.getCanvas();
    var context = kin.getContext();
    
    kin.beginRegion();
        context.beginPath();
        context.rect(slider.centerX-slider.side/2, slider.centerY-slider.side/2, 
            slider.side, slider.side);
     
        context.fillStyle = "#8ED6FF";
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = "black";
        context.stroke();
        
        context.font="12pt Calibri";
        context.fillStyle = "black";
        var val=Math.round(slider.value*10)/10;
        context.fillText(""+val,slider.centerX-slider.side/3,slider.centerY);
        kin.addRegionEventListener("mousedown", function() {
                slider.isDragging = true;
            });
            kin.addRegionEventListener("mouseup", function(){
                slider.isDragging = false;
            });
    kin.closeRegion();
    
    kin.beginRegion();
        context.beginPath();
        context.rect(0,0,canvas.width,canvas.height);
        kin.addRegionEventListener("mouseup", function(){
                slider.isDragging = false;
                dd.isDragging = false;
            });
    kin.closeRegion();
    
}

Referanser

Canvas Animation, Interactivity, WebGL KINETICJS www.kineticjs.com/ 02-10-2011

Canvas html5canvastutorials.com www.html5canvastutorials.com/ 02-10-2011

Vedlikehold

B. Stenseth, oktober 2011

( Velkommen ) HTML > Canvas >Interaktiv ( Pixler )