Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- require(
- [],
- function () {
- console.log("yo, I'm alive!");
- var paper = new Raphael(document.getElementById("mySVGCanvas"));
- // Find get paper dimensions
- var dimX = paper.width;
- var dimY = paper.height;
- var rect = paper.rect(0,0,dimX,dimY);
- rect.attr({"fill": "#A1ECD6"});
- var canvas = document.getElementById("mySVGCanvas");
- var mouth = paper.path("M 200 250 Q 300 125 400 250");
- // M (start point) Q (control point, end point) -> control point is the point of inflection
- mouth.attr({"stroke": "#FFF", "stroke-width": "8", "fill": "none"});
- var myButton = document.getElementById("myButton");
- myButton.addEventListener("click", function(ev){
- //alert("got a click");
- changeMe(myButton);
- });
- var buttonState = "frown";
- function smileFunction() {
- mouth.attr({"stroke": "#FFF", "stroke-width": "0", "fill": "none"});
- myButton.style.backgroundImage = "url(resources/yelloworangegradient.png)";
- mouth = paper.path("M 200 125 Q 300 200 400 125");
- mouth.attr({"stroke": "#FFF", "stroke-width": "8", "fill": "none"});
- }
- function frownFunction() {
- mouth.attr({"stroke": "#FFF", "stroke-width": "0", "fill": "none"});
- myButton.style.backgroundImage = "url(resources/pinkyellowgradient.png)";
- mouth = paper.path("M 200 250 Q 300 125 400 250");
- mouth.attr({"stroke": "#FFF", "stroke-width": "8", "fill": "none"});
- }
- function changeMe() {
- if (buttonState == "smile") {
- buttonState = "frown"
- myButton.value = "frown";
- frownFunction();
- } else {
- buttonState = "smile"
- myButton.value = "smile";
- smileFunction();
- }
- }
- smileFunction();
- frownFunction();
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement