Mouse Clicks and Resizing Circles

   



Mouse Clicks and Scaled Ellipses

Consider the ellipse rendered in Figure 11.9.

click to expand
Figure 11.9: A mouse-aware scaling ellipse.

The SVG document in Listing 11.11 demonstrates how to use the SVG onclick element in order to resize a scaling ellipse.

Listing 11.11 scalingEllipse1.svg

start example
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"      xmlns="http://www.w3.org/2000/svg">   <desc>Capture mouse click events</desc>   <!-- script for updating the visible ellipse -->   <script type="text/ecmascript">   <![CDATA[     function mouseClick1(event)     {        var ellipse = event.target;        var currentXRadius = ellipse.getAttribute("rx");        if(currentXRadius == 120)        {           ellipse.setAttribute("rx", currentXRadius*2);           ellipse.setAttribute("fill", "#FF0000");        }        else        {           ellipse.setAttribute("rx", currentXRadius*0.5);           ellipse.setAttribute("fill", "#FFFF00");        }     }   ]]> </script>   <g transform="translate(20,50)">      <text x="0" y="0" font-size="30">        Click on the moving ellipse      </text>   </g>   <!-- rectangular background -->   <g transform="translate(50,100)">      <rect x="0" y="0" width="500" height="400"            fill="#CCCCCC" stroke="blue"/>      <!-- Handle mouse click via script function -->      <ellipse onclick="mouseClick1(evt)"               cx="250" cy="200" rx="120" ry="60"               fill="blue">              <animateTransform attributeName="transform"                                attributeType="XML"                                type="scale"                                from="0" to="1"                                begin="0s" dur="4s"/>      </ellipse>   </g> </svg>
end example

Remarks

When you click inside the moving ellipse, the ECMAScript function mouseClick1() is executed; the contents of this function are given below:

function mouseClick1(event) {    var ellipse = event.target;    var currentXRadius = ellipse.getAttribute("rx");    if(currentXRadius == 120)    {       ellipse.setAttribute("rx", currentXRadius*2);       ellipse.setAttribute("fill", "#FF0000");    }    else    {       ellipse.setAttribute("rx", currentXRadius*0.5);       ellipse.setAttribute("fill", "#FFFF00");    }  }

The function mouseClick1() initializes the variable ellipse with an object. The variable currentXRadius is assigned the value of the rx attribute of the variable ellipse with the following line of code:

var currentXRadius = ellipse.getAttribute('rx");

Next, the 'if/then" logic determines which block of code to execute in order to assign values to the rx attribute (i.e., the horizontal axis for the ellipse) and the fill attribute:

if(currentXRadius == 120) {    ellipse.setAttribute('rx", currentXRadius*2);    ellipse.setAttribute('fill", '#FF0000"); } else {    ellipse.setAttribute('rx", currentXRadius*0.5);    ellipse.setAttribute('fill", '#FFFF00"); }

The examples that you have seen in this chapter demonstrated how to associate mouse-related events with SVG elements and then use getAttribute/setAttribute in ECMAScript functions in order to dynamically update attributes of SVG elements.

Key Constructs

An SVG document can be launched in an HTML page with the following HTML
fragment:

<embed width="500" height="400"        src="/books/2/32/1/html/2/displayRect1.svg" type="image/svg">

The following SVG fragment specifies an URL-enabled ellipse:

<a xlink:href="http://www.w3.org">    <ellipse fill="red" cx="0" cy="0"             rx="50" ry="25"/> </a> 

The following SVG fragment specifies a 'mouse-aware' rectangle:

<rect   x="0" y="0" width="200" height="100"   style="fill:red;stroke:blue;stroke-width:4;">   <set begin="mouseover" end="mouseout"    attributeName="fill" from="#FFFF00" to="#000000"/> </rect>

The following SVG fragment specifies a 'mouse-aware' rectangle that becomes invisible when you move your mouse over the rectangle:

<rect   x="0" y="0" width="200" height="100"   style="fill:red;stroke:blue;stroke-width:4;">   <set begin="mouseover" end="mouseout"    attributeName="fill" from="#FFFF00" to="#000000"/>   <set attributeName="visibility" attributeType="XML"    to="hidden" begin="1s" dur="3s"/> </rect>

The following ECMAScript function changes the radius of a rendered circle:

function mouseClick1(evt) {    var circle = evt.target;    var currentRadius = circle.getAttribute("r");    if(currentRadius == 100)    {       circle.setAttribute("r", currentRadius*2);       circle.setAttribute("fill", "#FF0000");    }    else    {       circle.setAttribute("r", currentRadius*0.5);       circle.setAttribute("fill", "#FFFF00");    } }



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net