説明に次のようにあります。
A raster source allows arbitrary manipulation of pixel values. In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster source. The raster operation takes pixels in in RGB space, converts them to HCL color space, adjusts the values based on the controls above, and then converts them back to RGB space for rendering.
ラスタソースは、画素値の任意の操作を可能にします。この例では、入力タイルソースの RGB 値は、第2ラスタソースでレンダリングされる前に、画素毎の操作で調整されます。ラスターオペレーションは、HCL 色空間に変換し、RGB 空間内の画素を取り、上記のコントロールに基づいて値を調整し、その後、レンダリングのために RGB 空間に戻して変換します。
HCL color space は「HCL color space（https://en.wikipedia.org/wiki/HCL_color_space）」に次のようにあります。
HCL (Hue-Chroma-Luminance) is a commonly used alternative name for the L*C*h(uv) color space, also known as the cylindrical representation or polar CIELUV. It is a color space model designed to accord with human perception of color. HCL has been adopted by information visualization practitioners to present data without the bias implicit in using varying saturation.
HCL（色相・彩度・輝度）は、円筒形の表現または極性CIELUVとして知られているのL* C* hで（UV）色空間のために一般的に使用される代替名です。それは色の人間の知覚と一致するように設計された色空間モデルです。 HCLは、様々な彩度を使用して、暗黙的な偏りなくデータを提示する情報可視化の実践に採用されています。
HTML ファイルの作成
同じように「color-manipulation.js」を開きます。
f 「color-manipulation.html」の内容をコピーして「2133-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「2133-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「color-manipulation.js」の内容をコピーして貼り付け、修正します。「color-manipulation-require.js」も「2133-ol3ex-require.js」に貼り付けます。
「2133-ol3ex.html」
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-combined.min.css" type="text/css">
<!-- <link rel="stylesheet" href="../css/ol.css" type="text/css"> <link rel="stylesheet" href="./resources/layout.css" type="text/css"> <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css"> <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script> 「resources」の位置が変わりました。 --> <!-- ディレクトリ修正 --> <link rel="stylesheet" href="v3.11.2/css/ol.css" type="text/css"> <link rel="stylesheet" href="v3.11.2/examples/resources/layout.css" type="text/css"> <link rel="stylesheet" href="v3.11.2/examples/resources/prism/prism.css" type="text/css"> <script src="v3.11.2/examples/resources/zeroclipboard/ZeroClipboard.min.js"></script>
<!-- <link rel="stylesheet" href="color-manipulation.css"> --> <link rel="stylesheet" href="v3.11.2/examples/color-manipulation.css">
<title>Manipulating colors with a raster source</title> </head> <body>
<!-- bootstrap-combined.min.css, ol.css, layout.css, CSSファイルで設定されたセレクタを使用。 --> <header class="navbar" role="navigation"> <div class="container" id="navbar-inner-container">
<!--
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a>
-->
<!-- ディレクトリ修正 -->
<a class="navbar-brand" href="v3.11.2/examples/"><img src="v3.11.2/examples/resources/logo-70x70.png"> OpenLayers 3 Examples</a>
</div> </header> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div>
<table class="controls">
<tr>
<td>hue</td>
<td><span id="hueOut"></span>°</td>
<td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
</tr>
<tr>
<td>chroma</td>
<td><span id="chromaOut"></span> %</td>
<td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
</tr>
<tr>
<td>lightness</td>
<td><span id="lightnessOut"></span> %</td>
<td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
</tr>
</table>
</div> </div> <div class="row-fluid"> <div class="span12"> <h4 id="title">Manipulating colors with a raster source</h4>
<p id="shortdesc">Demonstrates color manipulation with
a raster source.</p>
<div id="docs"><p>A raster source allows arbitrary
manipulation of pixel values. In this example, RGB
values on the input tile source are adjusted in a
pixel-wise operation before being rendered with a
second raster source. The raster operation takes
pixels in in RGB space, converts them to HCL color
space, adjusts the values based on the controls
above, and then converts them back to RGB space for
rendering.</p>
</div>
<div id="tags">color, hue, lightness, chroma</div>
<div id="api-links">Related API documentation:
<ul class="inline">
<li>
<!--<a href="../apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map>/a> -->
<a href="v3.11.2/apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View>/a> -->
<a href="v3.11.2/apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.layer.Image.html" title="API documentation for ol.layer.Image">ol.layer.Image>/a> -->
<a href="v3.11.2/apidoc/ol.layer.Image.html" title="API documentation for ol.layer.Image">ol.layer.Image</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.source.Rastere.html" title="API documentation for ol.source.Raster">ol.source.Raster>/a> -->
<a href="v3.11.2/apidoc/ol.source.Rastere.html" title="API documentation for ol.source.Raster">ol.source.Raster</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.source.Stamen.html" title="API documentation for ol.source.Stamen">ol.source.Stamen>/a> -->
<a href="v3.11.2/apidoc/ol.source.Stamen.html" title="API documentation for ol.source.Stamen">ol.source.Stamen</a>
</li>
</ui>
</div>
</div>
</div>
<div class="row-fluid">
<div id="source-controls">
<a id="copy-button">
<i class="fa fa-clipboard"></i> Copy
</a>
<a id="jsfiddle-button">
<i class="fa fa-jsfiddle"></i> Edit
</a>
</div>
<form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
<textarea class="hidden" name="js">
// --- 省略 --- </html></code></pre>
</div> </div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- <script src="./resources/common.js"></script> <script src="./resources/prism/prism.min.js"></script> --> <!-- ディレクトリ修正 CommonJS と prism.js --> <script src="v3.11.2/examples/resources/common.js"></script> <script src="v3.11.2/examples/resources/prism/prism.min.js"></script>
<!-- <script src="loader.js?id=color-manipulation"></script> --> <!-- ファイル修正 --> <!-- ディレクトリ修正 --> <script src="loader.js?id=2133-ol3ex"></script>
</body> </html>
COMMONJS は
COMMONJS
http://webpack.github.io/docs/commonjs.html
に、次のようにあります。
The CommonJS group defined a module format to solve JavaScript scope issues by making sure each module is executed in its own namespace.
This is achieved by forcing modules to explicitly export those variables it wants to expose to the “universe”, and also by defining those other modules required to properly work.
To achieve this CommonJS give you two tools:
the require() function, which allows to import a given module into the current scope.
the module object, which allows to export something from the current scope.
CommonJSグループは、それ自身の名前空間内で実行されている各モジュールを確認することによって、JavaScriptのスコープ問題を解決するためのモジュールフォーマットを定義しました。
これは、それが「universe（？）」に公開したい変数を明示的にエクスポートするモジュールを強制することによって、同じように、正常に動作するのに必要な他のモジュールを定義することによって、達成されます。
この CommonJS を達成するために2つのツールを与えます：
require()関数、指定したモジュールを現在のスコープにインポートすることができます。
モジュールオブジェクト、現在のスコープからエクスポートすることができます。
Prism は、
Prism
http://prismjs.com/
に、次のようにあります。
Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.
Prismは、最新のWeb標準に構築されたことを考慮し軽量で拡張可能なシンタックスハイライトです。それは Dabblet からスピンオフで、何千人も日々そこで試験されています。
ZeroClipboard は
ZeroClipboard v2.x
http://zeroclipboard.org/
に、次のようにあります。
The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
ZeroClipboard ライブラリは、見えない Adobe Flash ムービーとJavaScript のインターフェイスを使用してテキストをクリップボードにコピーする簡単な方法を提供します。
Debian 8 では動作しませんでした。ボタンを右クリックしたときに flash のコンテキストメニューが表示されると動作しています。
0 件のコメント:
コメントを投稿