Advertisement
Guest User

Untitled

a guest
Feb 23rd, 2019
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. require(
  2.     [],
  3.     function () {
  4.            
  5.         console.log("yo, I'm alive!");
  6.  
  7.         var paper = new Raphael(document.getElementById("mySVGCanvas"));
  8.         // Find get paper dimensions
  9.         var dimX = paper.width;
  10.         var dimY = paper.height;
  11.  
  12.         var rect = paper.rect(0,0,dimX,dimY);
  13.         rect.attr({"fill": "#A1ECD6"});
  14.  
  15.         var canvas = document.getElementById("mySVGCanvas");
  16.  
  17.         var mouth = paper.path("M 200 250 Q 300 125 400 250");
  18.         // M (start point) Q (control point, end point) -> control point is the point of inflection
  19.         mouth.attr({"stroke": "#FFF", "stroke-width": "8", "fill": "none"});
  20.  
  21.         var myButton = document.getElementById("myButton");
  22.  
  23.         myButton.addEventListener("click", function(ev){
  24.                 //alert("got a click");
  25.                 changeMe(myButton);
  26.         });
  27.  
  28.         var buttonState = "frown";
  29.        
  30.         function smileFunction() {
  31.                 mouth.attr({"stroke": "#FFF", "stroke-width": "0", "fill": "none"});
  32.                 myButton.style.backgroundImage = "url(resources/yelloworangegradient.png)";
  33.                 mouth = paper.path("M 200 125 Q 300 200 400 125");
  34.                 mouth.attr({"stroke": "#FFF", "stroke-width": "8", "fill": "none"});
  35.         }
  36.  
  37.         function frownFunction() {
  38.                 mouth.attr({"stroke": "#FFF", "stroke-width": "0", "fill": "none"});
  39.                 myButton.style.backgroundImage = "url(resources/pinkyellowgradient.png)";
  40.                 mouth = paper.path("M 200 250 Q 300 125 400 250");
  41.                 mouth.attr({"stroke": "#FFF", "stroke-width": "8", "fill": "none"});
  42.  
  43.         }
  44.  
  45.         function changeMe() {
  46.                 if (buttonState == "smile") {
  47.                     buttonState = "frown"
  48.                     myButton.value = "frown";
  49.                     frownFunction();
  50.                 } else {
  51.                     buttonState = "smile"
  52.                     myButton.value = "smile";
  53.                     smileFunction();
  54.                 }
  55.         }
  56.  
  57.  
  58.         smileFunction();
  59.         frownFunction();
  60.  
  61.  
  62. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement