Fork me on GitHub

Example: Styling BezierWire

This example demonstrates how to style an Styling BezierWire.

color:

weight:

opacity:

dashstyle:

fill color:

HTML

<div id="attributes">
 
   <p id="color">
     color: <button id="red">red</button> <button id="yellow">yellow</button> <button id="blue">blue</button> <button id="rgb(173,216,230)">rgb(173,216,230)</button>
   </p>

   <p id="weight">
     weight: <button id="1">1</button> <button id="2">2</button> <button id="3">3</button> <button id="4">4</button> <button id="5">5</button>
   </p>

   <p id="opacity">
     opacity: <button id="1">1</button> <button id="0.8">0.8</button> <button id="0.6">0.6</button> <button id="0.4">0.4</button> <button id="0.2">0.2</button> <button id="0">0</button>
   </p>
  
   <p id="dashstyle">
     dashstyle: <button id="none">none</button> <button id="[{0:'5',1:'4'}]">Dashed [5,4]</button><button id="[{0:'1',1:'3'}]">Dashed [1,3]</button>
   </p>

   <p id="fillcolor">
     fill color: <button id="none">none</button> <button id="red">red</button> <button id="yellow">yellow</button> <button id="blue">blue</button> <button id="rgb(173,216,230)">rgb(173,216,230)</button>
   </p>

</div>
  
<div style="position: relative; width: 500px; height: 277px;" id="layer"></div>

JavaScript

Implementation

YUI().use('bezier-wire', function(Y) {

    var mygraphic = new Y.Graphic({render: "#layer"}); 

    var wire = mygraphic.addShape({
      type: Y.BezierWire,
      stroke: {
        weight: 4,
        color: "rgb(173,216,230)" 
      },
      src: {
        getXY: function() {
          return [300,50];
        }
      },
      tgt: {
        getXY: function() {
          return [700,250];
        }
      },
      bezierTangentNorm:300
    });
        
    Y.all('#attributes button').on('click',function(ev) {
      
      var attrName = ev.target.get('parentNode').get('id');
      var value = ev.target.get('id');

      switch (attrName) {
        case "color":
            wire.set("stroke",{color:value});
            break;
        case "weight":
            wire.set("stroke",{weight:value});
            break;
        case "opacity":
            wire.set("stroke",{opacity:value});
            break;
        case "dashstyle":
            if(value == 'none') {
                wire.set("stroke",{dashstyle:'none'});
            }
            else{
                var dashedArray = eval(value);
                wire.set("stroke",{dashstyle:[dashedArray[0][0],dashedArray[0][1]]});
            }
            break;
        case "fillcolor":
            wire.set("fill",{color:value});
            break;
      }
  });

});