色

(OpenLaszlo4.9.0/swf8)

<canvas proxied="false" bgcolor="0xffffcc">
  <script><![CDATA[
    function dec2hex(n){
      var h = "0123456789ABCDEF";
      var n1 = Math.floor(n/16);
      var n2 = n-n1*16;
      if(n1>=16){
        return this.dec2hex(n1) + h.charAt(n2);
      }else{
        return h.charAt(n1) + h.charAt(n2);
      }
    }
  ]]></script>
  <edittext id="hex" enabled="false">
    <handler name="onR" reference="v">
      this.setHex();
    </handler>
    <handler name="onG" reference="v">
      this.setHex();
    </handler>
    <handler name="onB" reference="v">
      this.setHex();
    </handler>
    <method name="setHex">
      this.setAttribute('text',"#"+dec2hex(v.R)+dec2hex(v.G)+dec2hex(v.B));
    </method>
  </edittext>
  <simplelayout spacing="20"/>
  <view id="v" width="210" height="50" bgcolor="${'rgb('+this.R+','+this.G+','+this.B+')'}" >
    <attribute name="R" value="0"/>
    <attribute name="G" value="0"/>
    <attribute name="B" value="0"/>
  </view>
  <hbox>
    <text>R</text>
    <slider minvalue="0" maxvalue="255" value="255" onvalue="v.setAttribute('R',this.value)"/>
  </hbox>
  <hbox>
    <text>G</text>
    <slider minvalue="0" maxvalue="255" value="0" onvalue="v.setAttribute('G',this.value)"/>
  </hbox>
  <hbox>
    <text>B</text>
    <slider minvalue="0" maxvalue="255" value="0" onvalue="v.setAttribute('B',this.value)"/>
  </hbox>
</canvas>

bgcolor="silver"

基本16色は、上記のように数値でなく色名で指定可能です。

• 一覧

基本16色に加え、いくつかの色名の定義がOpenLaszlo側で追加されています。この場合＄{}を使った下記のような記述になります。

bgcolor="${iceblue1}"

この方法を使うには/base/colors.lzxのインクルードが必要です。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xffffff" width="250" height="250">
  <include href="/base/colors.lzx"/>
 
  <simplelayout spacing="10"/>
 
  <view width="100" height="30" bgcolor="${gold1}">
    <text text="gold1"/>
  </view>
  <view width="100" height="30" bgcolor="${iceblue1}">
    <text text="iceblue1"/>
  </view>
  <view width="100" height="30" bgcolor="${palegreen1}">
    <text text="palegreen1"/>
  </view>
  <view width="100" height="30" bgcolor="${graypurple}">
    <text text="graypurple"/>
  </view>
</canvas>

• OpenLaszloソース/base/colors.lzxに記述されている色名と数値の定義

    var offwhite = 0xf2f2f2;
    var gray10 = 0x1a1a1a;
    var gray20 = 0x333333;
    var gray30 = 0x4d4d4d;
    var gray40 = 0x666666;
    var gray50 = 0x7f7f7f;
    var gray60 = 0x999999;
    var gray70 = 0xb3b3b3;
    var gray80 = 0xcccccc;
    var gray90 = 0xe5e5e5;
 
    var iceblue1 = 0x325693;
    var iceblue2 = 0x5381CE;
    var iceblue3 = 0xBAC4D5;
    var iceblue4 = 0xD5E4F3;
    var iceblue5 = 0xEEF1F5;
 
    var palegreen1 = 0x417641;
    var palegreen2 = 0xB3D3B3;
    var palegreen3 = 0xC0D49D;
    var palegreen4 = 0xD3EAAA;
    var palegreen5 = 0xEFF1E8;
 
    var gold1 = 0x8E6409;
    var gold2 = 0xCBB14B;
    var gold3 = 0xE6CF74;
    var gold4 = 0xF8E496;
 
    var sand1 = 0xD4C6A1;
    var sand2 = 0xD9D7C2;
    var sand3 = 0xF2EEDB;
    var sand4 = 0xF3EEE1;
 
    var ltpurple1 = 0x645698;
    var ltpurple2 = 0xB7B0D1;
    var ltpurple3 = 0xCBC1ED;
    var ltpurple4 = 0xE9E7F0;
 
    var grayblue = 0xBEC2C8;
    var graygreen = 0xC0CCC0;
    var graypurple = 0x9F9DB1;
 
    var ltblue = 0xDDDDFF;
    var ltgreen = 0xDDFFDD;

色は10進数、16進数、色名で指定できます。

(OpenLaszlo4.9.0/swf8)

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xffffff">
  <simplelayout spacing="5"/>
  <view width="200" height="20" bgcolor="${16711680}"/>
  <view width="200" height="20" bgcolor="#ff0000" />
  <view width="200" height="20" bgcolor="0xff0000"  />
  <view width="200" height="20" bgcolor="red"/>
  <view width="200" height="20" bgcolor="rgb(255,0,0)"/>
</canvas>