Export (0) Print
Expand All

Color Class

Bing

Represents a color.

Constructor

Name Definition Description

Color

Color(a:number, r:number, g:number, b:number)

Initializes a new instance of the Color class. The a parameter represents opacity. The range of valid values for all parameters is 0 to 255.

Properties

Name Type Description

a

number

The opacity of the color. The range of valid values is 0 to 255.

r

number

The red value of the color. The range of valid values is 0 to 255.

g

number

The green value of the color. The range of valid values is 0 to 255.

b

number

The blue value of the color. The range of valid values is 0 to 255.

Static Methods

Name Definition Return Value Description

clone

clone(color: Color )

Color

Creates a copy of the Color object.

fromHex

fromHex(hex:string)

Color

Converts the specified hex string to a Color.

Methods

Name Definition Return Value Description

clone

clone()

Color

Returns a copy of the Color object.

getOpacity

getOpacity()

number

Returns the opacity of the Color as a value between 0 (a=0) and 1 (a=255).

toHex

toHex()

string

Converts the Color into a 6-digit hex string. Opacity is ignored. For example, a Color with values (255,0,0,0) is returned as hex string #000000.

toString

toString()

string

Converts the Color object to a string.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">

          var map = null;


         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key"}); 

            // Create the locations
            var location1 = new Microsoft.Maps.Location(-20,-20);
            var location2 = new Microsoft.Maps.Location(20,-20);
            var location3 = new Microsoft.Maps.Location(20,20);
            var location4 = new Microsoft.Maps.Location(60, 20);
            var location5 = new Microsoft.Maps.Location(60, 60);


            // Create a shape
            var lineVertices = new Array(location1, location2, location3, location4, location5);
            var line = new Microsoft.Maps.Polyline(lineVertices,{strokeColor:new Microsoft.Maps.Color(100, 100, 0, 100)});

            // Add the shape to the map
            map.entities.push(line);

         }

         function SetPolygonColor()
         {
            // Get the polyline entity. 
            var mapLine = map.entities.get(0);

            // Set the option values
            var opacity = document.getElementById('txtA').value;
            var rValue = document.getElementById('txtR').value;
            var gValue = document.getElementById('txtG').value;
            var bValue = document.getElementById('txtB').value;
            var lineWidth = document.getElementById('txtWidth').value;

           
            // Verify input values and set the opacity, color, 
            //    and width of the line.
            if (((opacity < 0) || (opacity > 255)) || 
                ((rValue < 0) || (rValue > 255)) || 
                ((gValue < 0) || (gValue > 255)) || 
                ((bValue < 0) || (bValue > 255)) ) 
            {
               alert("Opacity and all color values must be between 0 and 255.");
            }
            else
            {
               mapLine.setOptions({strokeColor:new Microsoft.Maps.Color(opacity, rValue, gValue, bValue), strokeThickness:lineWidth});
            }
         
         }


      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
      Line Opacity: <input id="txtA" type="text" value="100"/><br/>
      Red Color Value: <input id="txtR" type="text" value="100"/><br/>
      Green Color Value: <input id="txtG" type="text" value="100"/><br/>
      Blue Color Value: <input id="txtB" type="text" value="100"/><br/>
      Line Width: <input id="txtWidth" type="text" value="5"/><br/>
      <input id="btnChangeColor" type="button" value="Set Polygon Color" onclick="SetPolygonColor();"/>       
   </body>
</html>
Show:
© 2014 Microsoft