Question

Bonus Laboratory-Raphael JS 1. Using Raphael, create the following shapes: 2. Add some events and effects.

Answer 1

The description of code is given in inline comments.

Code:

<div id="container"></div>

<button id="show">Show</button>

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"> </script>

<script>

var paper = Raphael(10, 50, 960, 860);

// we need 6 rectangle to draw television

//  the below 3 rectangles are used for drawing Telivision

var rect1 = paper.rect(300, 100, 200, 100).attr({

    fill: 'gray',

    stroke: 'red',

        'stroke-width': 1,

    cursor: 'pointer'

});

var rect2 = paper.rect(390, 200, 12, 25).attr({

    fill: 'gray',

    stroke: 'red',

        'stroke-width': 1,

    cursor: 'pointer'

});

var rect3 = paper.rect(300, 225, 200, 10).attr({

    fill: 'gray',

    stroke: 'red',

        'stroke-width': 1,

    cursor: 'pointer'

});

//////////////////////////////////////////////

//  the below 3 rectangles are used for Telivision holder

var rect4 = paper.rect(250, 235, 300, 15).attr({

    fill: 'blue',

    stroke: 'red',

        'stroke-width': 0,

    cursor: 'pointer'

});

var rect5 = paper.rect(280, 250, 13,150).attr({

    fill: 'blue',

    stroke: 'red',

        'stroke-width': 0,

    cursor: 'pointer'

});

var rect6 = paper.rect(500, 250, 13,150).attr({

    fill: 'blue',

    stroke: 'red',

        'stroke-width': 0,

    cursor: 'pointer'

});

///////////////////////////////////////////////////////////////

var dot = paper.circle(650, 300, 60).attr({

    fill: 'gray',

    stroke: 'blue',

        'stroke-width': 1,

    cursor: 'pointer'

});

var e = paper.ellipse(650, 100, 40, 80).attr({fill: 'orange', stroke:"red"});

var tetronimo = paper.path("M 600 380 l 100 0 l 17 22 l -20 0 l 0 -10 l -90 0 l 0 10 l -20 0z").attr({

    fill: 'gray',

    stroke: 'blue',

        'stroke-width': 1,

    cursor: 'pointer'

});

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function DrawTriangleOnPaper(x,y,ax,ay,bx,by){

    // typical structure of the triangle

     var trianglePath = [["M",x,y],["L",ax,ay],["L",bx,by],["Z"]];

     var discattr = {fill: "yellow",stroke: "1"};

     

     var triangle = paper.path(trianglePath).attr({

                                        fill: 'blue',

                                        stroke: 'red',

                                        'stroke-width': 1,

                                        }); // Draw the triangle

     

     // The below code creates yellow circles formoving the triangle

     // using below circles we have created the effects

     cont = paper.set(

        paper.circle(x, y, 5).attr(discattr),

        paper.circle(ax, ay, 5).attr(discattr),

        paper.circle(bx, by, 5).attr(discattr));

      

      //We create the update to ove the circle position

      cont[0].update = function(mouseX,mouseY) {

        var newX = this.attr("cx") + mouseX;

        var newY = this.attr("cy") + mouseY;

        this.attr({cx:newX,cy:newY}

        );

        

        trianglePath[0][1] = newX;

        trianglePath[0][2] = newY;

        

        triangle.attr({path: trianglePath});

      }

      cont[1].update = function(mouseX,mouseY) {

        var newX = this.attr("cx") + mouseX;

        var newY = this.attr("cy") + mouseY;

        this.attr({cx:newX,cy:newY});

         trianglePath[1][1]  = newX;

         trianglePath[1][2]  = newY;

         

         triangle.attr({path:trianglePath});

      }

      

      cont[2].update = function(mouseX,mouseY) {

        var newX = this.attr("cx") + mouseX;

        var newY = this.attr("cy") + mouseY;

        this.attr({cx:newX,cy:newY});

         trianglePath[2][1] = newX;

         trianglePath[2][2] = newY;

         

         triangle.attr({path:trianglePath})

      }

      

      // setting the functions on drag

      cont.drag(moveMouse,upMouse);

  }

  

  function moveMouse(mouseX,mouseY){

    this.update(mouseX - (this.mouseX ||0) ,mouseY - (this.mouseY || 0));

    this.mouseX = mouseX;

    this.mouseY = mouseY;

    console.log(mouseX)

    

    console.log('=')

    console.log(mouseY)

  }

  

  function upMouse(){

    this.mouseX = this.mouseY = 0;

  }

DrawTriangleOnPaper(150,210,200,300,100,300);

// for drawing the line

var rectangle = paper.rect(140, 300, 10, 300).attr({

    fill: 'blue',

    stroke: 'blue',

        'stroke-width': 1,

    cursor: 'pointer'

});

// for drawing the rectangle below the triangle

var rectangle = paper.rect(100, 600, 100, 30).attr({

    fill: 'blue',

    stroke: 'blue',

        'stroke-width': 1,

    cursor: 'pointer'

});

//  Creating the button events

var button = document.getElementById('show');

button.onclick = function () {

    console.log("hi")

    dot.animate({

        fill: '#005'

    }, 500);

};

</script>

Screnshot:

2 10 1 <div id="container"></div> <button id="show">Show</button> 3 4 <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"> </script> 5 6 v <script> 7 var paper = Raphael(10, 50, 960, 860); 8 9 // we need 6 rectangle to draw television the below 3 rectangles are used for drawing Telivision 11 v var rect1 = paper.rect(300, 100, 200, 100).attr({ 12 fill: 'gray', 13 stroke: 'red', 14 'stroke-width': 1, 15 cursor: pointer' 16 }); 17 v var rect2 = paper.rect(390, 200, 12, 25).attr({ 18 fill: 'gray', 19 stroke: 'red', 20 'stroke-width": 1, 21 cursor: pointer 22 }); 23 v var rect3 = paper.rect(300, 225, 200, 10).attr({ 24 fill: 'gray', 25 stroke: 'red', 26 'stroke-width': 1, 27 cursor: 'pointer! 28 }); 29 41 30 31 the below 3 rectangles are used for Telivision holder 32 v var rect4 = paper.rect(250, 235, 300, 15).attr({ 33 fill: 'blue', 34 stroke: 'red', 35 'stroke-width': 0, 36 cursor: 'pointer! 37 }); 38 v var rect5 = paper.rect(280, 250, 13,150).attr({ 39 fill: 'blue', 40 stroke: 'red', 'stroke-width': 0, 42 cursor: 'pointer! 43 }); 44 v var rect6 = paper.rect(500, 250, 13,150).attr({ 45 fill: 'blue', 46 stroke: 'red', 47 'stroke-width': 0, 48 cursor: 'pointer' 49 }); 50 51 52 53 v var dot = paper.circle(650, 300, 60).attr({ 54 fill: 'gray', 55 stroke: 'blue',

56 'stroke-width': 1, 57 cursor: pointer' 58 }); 59 60 var e = paper.ellipse(650, 100, 40, 80).attr({fill: 'orange', stroke:"red"}); 61 62 v var tetronimo = paper.path("M 600 380 1 100 0 1 17 22 1-20 0 1 0 -10 1 -90 0 1 0 10 1 -20 Oz").attr({ 63 fill: 'gray', 64 stroke: 'blue', 65 'stroke-width": 1, 66 cursor: pointer. 67 }); 68 69 70 v function DrawTriangleOnPaper(x,y,ax,ay, bx,by) [ 71 72 // typical structure of the triangle 73 var trianglePath = [[ "M",x,y],["L", ax, ay],["L", bx, by],["Z"]]; 74 var discattr = {fill: "yellow", stroke: "1"}; 75 76 v var triangle = paper.path(trianglePath).attr({ 77 fill: 'blue', 78 stroke: 'red', 79 'stroke-width': 1, 80 }); // Draw the triangle 81 82 // The below code creates yellow circles formoving the triangle 83 // using below circles we have created the effects 84 cont = paper.set 85 paper.circle(x, y, 5).attr(discattr), 86 paper.circle(ax, ay, 5).attr(discattr), 87 paper.circle(bx, by, 5).attr(discattr)); 88 89 //We create the update to ove the circle position 90 V cont[@].update = function(mouseX,mouse) { 91 var newx = this.attr("cx") + mouseX; 92 var newy = this.attr("cy") + mousey; 93 this.attr({cx:newx,cy:newY} 94 ); 95 96 trianglePath[@][1] = newX; 97 trianglePath[@][2] = newY; 98 99 triangle.attr({path: trianglePath}); 100 101 V cont[1]. update = function(mouseX,mouse) { 102 var newX = this.attr("cx") + mouseX; 103 var newy = this.attr("cy") + mouseY; 104 this.attr({cx: newX,cy:newY}); 105 trianglePath[1][1] = newX; 106 trianglePath[1][2] = newY; 107 108 triangle.attr({path:trianglePath}); 109 } }

cont[2].update = function(mouseX,mouse) { var newx = this.attr("cx") + mouseX; var newy = this.attr("cy") + mouseY; this.attr({cx: newX,cy:newY}); trianglePath[2][1] = newX; trianglePath[2][2] = newY; triangle.attr({path: trianglePath}) } // setting the functions on drag cont.drag(moveMouse, upMouse); function moveMouse (mouseX,mousey){ this.update (mouseX - (this.mousex ||0) ,mousey - (this.mousey || 0)); this.mouseX = mouseX; this.mousey = mouseY; console.log(mouse) console.log('=') console.log(mousey) } function upMouse(){ this.mouseX = this.mouseY = 0; نہا 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 DrawTriangleOnPaper(150,210,200,300,100,300); // for drawing the line var rectangle = paper.rect(140, 300, 10, 300).attr({ fill: 'blue', stroke: 'blue', 'stroke-width': 1, cursor: 'pointer' }); // for drawing the rectangle below the triangle var rectangle = paper.rect(100, 600, 100, 30).attr({ fill: 'blue', stroke: 'blue', 'stroke-width": 1, cursor: pointer' }); // Creating the button events var button = document.getElementById('show'); button.onclick = function () { console.log("hi") dot.animate({ fill: '#005' }, 500); };

Output :

Show [o