説明に次のようにあります。
This example shows how to change the canvas compositing / blending mode in post- and precompose event handlers. The Canvas 2D API provides the property globalCompositeOperation with which one can influence which composition operation will be used when drawing on the canvas. The various options are well described on the MDN documentation page.
この例では、post- と precompose（後と事前作成）イベントハンドラでキャンバス合成/ブレンドモードを変更する方法を示します。Canvas 2D API は、キャンバス上に描画するときに使用される組成動作に影響を及ぼすことが可能なプロパティ globalCompositeOperation を提供します。様々なオプションがよく MDN のドキュメントページに記載されています。
In this example three circles on the corners of an equilateral triangle are drawn with red, green or blue styles respectively. By setting the globalCompositeOperation you can change how these colors turn out when they are combined on the map.
この例では、正三角形の角上の3つの円は、それぞれ、赤、緑、青のスタイルで描画されます。 globalCompositeOperation を設定することにより、それらがマップ上で結合されている場合、これらの色が判明される方法を変更することができます。
You can select an operation in the select-field and you can also control which layers will be affected by the chosen operation through the layer checkboxes.
選択フィールドでの動作を選択することができます。また、レイヤのチェックボックスを介して、選択した操作によって影響されるレイヤを制御することができます。
HTML ファイルの作成
b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.6.0」->「examples」->「blend-modes.html」をクリックして選択し、「OK」ボタンをクリックします。同じように「blend-modes.js」を開きます。
f 「blend-modes.html」の内容をコピーして「2122-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「2122-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「blend-modes.js」の内容をコピーして貼り付け、修正します。「blend-modes-require.js」も「2122-ol3ex-require.js」に貼り付けます。
「2122-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/bootstrap/2.3.1/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="blend-modes.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.6.0/css/ol.css" type="text/css"> <link rel="stylesheet" href="v3.6.0/examples/resources/layout.css" type="text/css"> <link rel="stylesheet" href="v3.6.0/examples/blend-modes.css"> <link rel="stylesheet" href="v3.6.0/examples/resources/prism/prism.css" type="text/css"> <script src="v3.5.0/examples/resources/zeroclipboard/ZeroClipboard.min.js"></script>
<title>Blend modes example</title> </head> <body>
<!-- bootstrap-combined.min.css, ol.css, layout.css, CSSファイルで設定されたセレクタを使用。 --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container">
<!-- <a class="brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a> --> <!-- ディレクトリ修正 --> <a class="brand" href="v3.6.0/examples/"><img src="v3.5.0/examples/resources/logo-70x70.png"> OpenLayers 3 Examples</a>
</div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="span12">
<div id="map" class="map"></div> </div> </div>
<div class="row-fluid">
<div class="span12">
<form class="form-horizontal">
<label>
<select id="blend-mode" class="form-control">
<option value="source-over">source-over (default)</option>
<option>source-in</option>
<option>source-out</option>
<option>source-atop</option>
<option>destination-over</option>
<option>destination-in</option>
<option>destination-out</option>
<option>destination-atop</option>
<option>lighter</option>
<option>copy</option>
<option>xor</option>
<option>multiply</option>
<option>screen</option>
<option>overlay</option>
<option>darken</option>
<option>lighten</option>
<option>color-dodge</option>
<option>color-burn</option>
<option>hard-light</option>
<option>soft-light</option>
<option selected>difference</option>
<option>exclusion</option>
<option>hue</option>
<option>saturation</option>
<option>color</option>
<option>luminosity</option>
</select>
Canvas compositing / blending mode
</label>
<label>
<input type="checkbox" id="affect-red" checked>
Red circle affected
</label>
<label>
<input type="checkbox" id="affect-green" checked>
Green circle affected
</label>
<label>
<input type="checkbox" id="affect-blue" checked>
Blue circle affected
</label>
</form>
</div>
</div>
<div class="row-fluid"> <div class="span12"> <h4 id="title">Blend modes example</h4> <p id="shortdesc">Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers. </p> <div id="docs">
<p>This example shows how to change the canvas
compositing / blending mode in post- and
precompose event handlers. The Canvas 2D API
provides the property
<code>globalCompositeOperation</code>
with which one can influence which composition
operation will be used when drawing on the canvas.
The various options are well described on the
<a href="https://developer.mozilla.org/en-US/docs/
Web/API/CanvasRenderingContext2D/
globalCompositeOperation">
MDN documentation page</a>.</p>
<p>In this example three circles on the
corners of an equilateral triangle are drawn
with red, green or blue styles respectively.
By setting the
<code>globalCompositeOperation</code>
you can change how these colors turn out when
they are combined on the map.</p>
<p>You can select an operation in the
select-field and you can also control which
layers will be affected by the chosen operation
through the layer checkboxes.</p>
</div>
<div id="tags">blendmode, blend-mode, blend mode,
blendingmode, blending-mode, blending mode,
composition, compositing, canvas, vector</div>
<div id="api-links">Related API documentation:
<ul class="inline">
<li>
<!--<a href="../apidoc/ol.Feature.html" title="API documentation for ol.Feature">ol.Feature>/a> -->
<a href="v3.6.0/apidoc/ol.Feature.html" title="API documentation for ol.Feature">ol.Feature</a>
</li>,
<li>
<!--<a href="../apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map>/a> -->
<a href="v3.6.0/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.6.0/apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.geom.Point.html" title="API documentation for ol.geom.Point">ol.geom.Point>/a> -->
<a href="v3.6.0/apidoc/ol.geom.Point.html" title="API documentation for ol.geom.Point">ol.geom.Point</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.layer.Vector.html" title="API documentation for ol.layer.Vector">ol.layer.Vector>/a> -->
<a href="v3.6.0/apidoc/ol.layer.Vector.html" title="API documentation for ol.layer.Vector">ol.layer.Vector</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.source.Vector.html" title="API documentation for ol.source.Vector">ol.source.Vector>/a> -->
<a href="v3.6.0/apidoc/ol.source.Vector.html" title="API documentation for ol.source.Vector">ol.source.Vector</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.style.Circle.html" title="API documentation for ol.style.Circle">ol.style.Circle</a> -->
<a href="v3.6.0/apidoc/ol.style.Circle.html" title="API documentation for ol.style.Circle">ol.style.Circle</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.style.Fill.html" title="API documentation for ol.style.Fill">ol.style.Fill</a> -->
<a href="v3.6.0/apidoc/ol.style.Fill.html" title="API documentation for ol.style.Fill">ol.style.Fill</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.style.Stroke.html" title="API documentation for ol.style.Stroke">ol.style.Stroke</a> -->
<a href="v3.6.0/apidoc/ol.style.Stroke.html" title="API documentation for ol.style.Stroke">ol.style.Stroke</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.style.Style.html" title="API documentation for ol.style.Style">ol.style.Style</a> -->
<a href="v3.6.0/apidoc/ol.style.Style.html" title="API documentation for ol.style.Style">ol.style.Style</a>
</li>
</ui>
</div>
</div> </div>
<div class="row-fluid">
<hr>
<form method="POST" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
<input type="button" class="btn btn-info" id="copy-button" value="Copy example code">
<input type="submit" class="btn btn-primary" id="jsfiddle-button" value="Create JSFiddle">
<textarea class="hidden" name="js">
// --- 省略 --- </html></code></pre>
</div> </div> </div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/2.3.1/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.6.0/examples/resources/common.js"></script> <script src="v3.6.0/examples/resources/prism/prism.min.js"></script>
<!-- <script src="loader.js?id=blend-modes"></script> --> <!-- ファイル修正 --> <!-- ディレクトリ修正 --> <script src="loader.js?id=2122-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 件のコメント:
コメントを投稿