Curly braces: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(17 intermediate revisions by the same user not shown)
Line 7: Line 7:
var height = 0.5; // height of the curly brace
var height = 0.5; // height of the curly brace


// Curly brace
var crl = brd.create('curve', [[0],[0]], {strokeWidth:1, strokeColor:'black'});
var crl = brd.create('curve', [[0],[0]], {strokeWidth:1, strokeColor:'black'});
crl.bezierDegree = 3;
crl.bezierDegree = 3;
Line 17: Line 18:
     d[1] *= height/dl;
     d[1] *= height/dl;


     this.dataX = [ A.X(), A.X()+d[1], mid[0], mid[0]+d[1], mid[0], B.X()+d[1], B.X()];
     this.dataX = [ A.X(), A.X()-d[1], mid[0], mid[0]-d[1], mid[0], B.X()-d[1], B.X() ];
     this.dataY = [ A.Y(), A.Y()-d[0], mid[1], mid[1]-d[0], mid[1], B.Y()-d[0], B.Y()];
     this.dataY = [ A.Y(), A.Y()+d[0], mid[1], mid[1]+d[0], mid[1], B.Y()+d[0], B.Y() ];
};
};
brd.update();
 
// Text
var txt = brd.create('text', [
                    function() {
                        var d = [B.X()-A.X(), B.Y()-A.Y()],
                            dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
                            mid = (A.X()+B.X())*0.5;
 
                        d[1] *= height/dl;
                        return mid-d[1]+0.1;
                    },
                    function() {
                        var d = [B.X()-A.X(), B.Y()-A.Y()],
                            dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
                            mid = (A.Y()+B.Y())*0.5;
 
                        d[0] *= height/dl;
                        return mid+d[0]+0.1;
                    },
                    function() { return "length="+B.Dist(A).toFixed(2); }
                ]);
 
 
brd.update(); // This update is necessary to call updateDataArray the first time.


</jsxgraph>
</jsxgraph>


===The JavaScript code===
<source lang="javascript">
<source lang="javascript">
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4],keepaspectratio:true,axis:true});
var A = brd.create('point', [-3,3]);
var B = brd.create('point', [3,-2]);
var line = brd.create('segment', [A,B]);
var height = 0.5; // height of the curly brace
// Curly brace
var crl = brd.create('curve', [[0],[0]], {strokeWidth:1, strokeColor:'black'});
crl.bezierDegree = 3;
crl.updateDataArray = function() {
    var d = [B.X()-A.X(), B.Y()-A.Y()],
        dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
        mid = [(A.X()+B.X())*0.5, (A.Y()+B.Y())*0.5];
    d[0] *= height/dl;
    d[1] *= height/dl;
    this.dataX = [ A.X(), A.X()-d[1], mid[0], mid[0]-d[1], mid[0], B.X()-d[1], B.X() ];
    this.dataY = [ A.Y(), A.Y()+d[0], mid[1], mid[1]+d[0], mid[1], B.Y()+d[0], B.Y() ];
};
// Text
var txt = brd.create('text', [
                    function() {
                        var d = [B.X()-A.X(), B.Y()-A.Y()],
                            dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
                            mid = (A.X()+B.X())*0.5;
                        d[1] *= height/dl;
                        return mid-d[1]+0.1;
                    },
                    function() {
                        var d = [B.X()-A.X(), B.Y()-A.Y()],
                            dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
                            mid = (A.Y()+B.Y())*0.5;
                        d[0] *= height/dl;
                        return mid+d[0]+0.1;
                    },
                    function() { return "length="+B.Dist(A).toFixed(2); }
                ]);
brd.update(); // This update is necessary to call updateDataArray the first time.
</source>
</source>
[[Category:Examples]]
[[Category:Examples]]
[[Category:Curves]]
[[Category:Curves]]
[[Category:Geometry]]
[[Category:Geometry]]

Latest revision as of 13:06, 19 February 2013

The JavaScript code

var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4],keepaspectratio:true,axis:true});
var A = brd.create('point', [-3,3]);
var B = brd.create('point', [3,-2]);
var line = brd.create('segment', [A,B]);

var height = 0.5; // height of the curly brace

// Curly brace
var crl = brd.create('curve', [[0],[0]], {strokeWidth:1, strokeColor:'black'});
crl.bezierDegree = 3;
crl.updateDataArray = function() {
    var d = [B.X()-A.X(), B.Y()-A.Y()],
        dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
        mid = [(A.X()+B.X())*0.5, (A.Y()+B.Y())*0.5];

    d[0] *= height/dl;
    d[1] *= height/dl;

    this.dataX = [ A.X(), A.X()-d[1], mid[0], mid[0]-d[1], mid[0], B.X()-d[1], B.X() ];
    this.dataY = [ A.Y(), A.Y()+d[0], mid[1], mid[1]+d[0], mid[1], B.Y()+d[0], B.Y() ];
};

// Text
var txt = brd.create('text', [
                    function() { 
                        var d = [B.X()-A.X(), B.Y()-A.Y()],
                            dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
                            mid = (A.X()+B.X())*0.5;

                        d[1] *= height/dl;
                        return mid-d[1]+0.1; 
                    },
                    function() { 
                        var d = [B.X()-A.X(), B.Y()-A.Y()],
                            dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
                            mid = (A.Y()+B.Y())*0.5;

                        d[0] *= height/dl;
                        return mid+d[0]+0.1; 
                    },
                    function() { return "length="+B.Dist(A).toFixed(2); }
                ]);


brd.update(); // This update is necessary to call updateDataArray the first time.