Paint Tool 2013-05-14

ペイントツール


ペイントツール描画ツール


ポインティングデバイス


Draw系ドロー

Paint系ペイント



Draw系ドロー


Vector形式ベクター

Raster形式ラスター



Draw系ドロー




ピクセル座標・方向・距離



Draw系ドロー







Draw系ドロー






マッシュアップ

マッシュアップWebプログラミング


複数のWebサービスのAPIを組み合わせ，あたかもひとつのWebサービスのようにする機能のこと。

http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)







ITの深い知識がなくても，既存のWebサービスを組み合わせて，短期間でアプリケーション開発ができることから，新しい開発技法として注目されている。









マッシュアップ4D


Webエリアを活用し，HTML/CSS/JavaScriptのAPIを組み合わせ，あたかもひとつのデスクトップアプリケーションのようにする開発技法。







HTML5

HTML5

<canvas> <svg>

プログラミング言語手続型宣言型

API ローレベルハイレベル

画像形式ビットマップベクター（XML）

レンダリングサイズに比例オブジェクト数に比例

オブジェクト操作無理容易

HTML5

<canvas> <svg>

プログラミング言語手続型宣言型

API ローレベルハイレベル

画像形式ビットマップベクター（XML）

レンダリングサイズに比例オブジェクト数に比例

オブジェクト操作無理容易

HTML5

<canvas>

プログラミング言語手続型

API ローレベル

画像形式ビットマップ

レンダリングサイズに比例

オブジェクト操作無理

<svg>

宣言型

ハイレベル

ベクター（XML）

オブジェクト数に比例

容易

HTML5

<canvas>


API ローレベル




<svg>

宣言型

ハイレベル



容易

JavaScript

HTML5

<canvas>


API ローレベル




<svg>

宣言型

ハイレベル



容易

JavaScript

高速!!

HTML5

<canvas>


API ローレベル




<svg>

宣言型

ハイレベル



容易

JavaScript

高速!!

JavaScript

JavaScript

Webブラウザで実行できるプログラミング言語

JavaScript


JavaScript


Webエリア

Webエリア

Webブラウザと同等の機能を有するフォームオブジェクト

Webエリア


Webエリア


Webエリア


Internet Explorer 7 Safari 4

Webエリア


Internet Explorer 7 Safari 4

Webエリア


Internet Explorer 7 Safari 4 Internet

Explorer Safari

Webエリア



Explorer Safari

Integrated WebKit

Webエリア



Explorer Safari

Integrated WebKit

WA OPEN URL

WA Execute JavaScript

WA EXECUTE JAVASCRIPT FUNCTION

WA SET PAGE CONTENT

// HTMLを表示 // JavaScriptを実行

Webエリア

WebエリアWA OPEN URL

WA SET PAGE CONTENT


WA SET PAGE CONTENT

ページの場所をシステムパスまたはURLを指定

ページの内容をHTMLで指定


WA SET PAGE CONTENT

ページの場所をシステムパスまたはURLを指定

ページの内容をHTMLで指定

追加リソースを相対パスで指定できる

追加リソースを相対パスで指定できるのはMacのみ（ベースURL）


システムパスまたはURLを指定

WA SET PAGE CONTENTHTMLを指定

// システムパス

C:¥MyFolder¥My File.html

Macintosh HD:MyFolder:My File.html

WA SET PAGE CONTENTfile:///C:/MyFolder/My%20File.html

file:///MyFolder/My%20File.html

// URL









// URL









// URL


システムパスをPOSIXパスに変換





Convert path system to POSIX

WA SET PAGE CONTENTC:/MyFolder/My File.html

/MyFolder/My File.html

// POSIX


システムパスをPOSIXパスに変換してURLエスケープ





WA SET PAGE CONTENTC:/MyFolder/My%20File.html

/MyFolder/My%20File.html

// ?

Convert path system to POSIX (...;*)


システムパスをURLに変換






file:////MyFolder/My%20File.html

// URL (Windows)

“file:///”+Convert path system to POSIX (...;*)


システムパスをURLに変換





WA SET PAGE CONTENTfile://C:/MyFolder/My%20File.html


// URL (Mac OS)

“file://”+Convert path system to POSIX (...;*)

WebエリアベースURL

*Mac Only


*Mac Only

WA SET PAGE CONTENTでも相対パスが指定できる


*Mac Only


<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></script><link rel=”stylesheet” href=”css/style.css” />

</head>


*Mac Only



</head>


*Mac Only



</head>

WA SET PAGE CONTENT (...;...;”file:///MyFolder/”)


*Mac Only



</head>



*Mac Only



</head>


Webエリアキャッシュ


Webエリアがロードしたファイルはキャッシュされることも・・・


Webエリアがロードしたファイルはキャッシュされることも・・・

WA SET PAGE CONTENTで渡したHTMLはキャッシュされない

WebエリアローカルHTMLファイル使用のポイント


● URL (file://)▲ システムパス



● WA SET PAGE CONTENT▲ WA OPEN URL




● 単一ファイル，絶対パス▲ 複数ファイル，<base>，相対パス





プラットフォーム注意





キャッシュ注意






キャッシュ注意


プラットフォーム・キャッシュ注意

Webエリアドラッグ＆ドロップでページを移動しないために

Webエリアドラッグ＆ドロップでページを移動しないために

<body ondragover="return false;" ondrop="return false;">

</body>

Webエリアフォームイベント


On End URL Loading$filter{1}:="http://*"$access{1}:=FalseWA SET URL FILTERS (*;...;$filter;$access)

On LoadWA OPEN URL/WA SET PAGE CONTENTWA SET PREFERENCE (*;...;wa enable JavaScript;True)


On URL Filtering$url:=WA Get last filtered URL

On End URL Loading$filter{1}:="http://*"$access{1}:=FalseWA SET URL FILTERS (*;...;$filter;$access)

On LoadWA OPEN URL/WA SET PAGE CONTENTWA SET PREFERENCE (*;...;wa enable JavaScript;True)






function clearCanvas () { window.location = "http://clearCanvas/";}





On ClickedWA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)



On ClickedWA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)



Webエリア

ペイントツールCanvasRenderingContext2D

メソッド説明arc() 曲線・円・弧beginPath() 線の始点を決めるclosePath() 現在位置から始点まで戻るfill() 線の内側を塗りつぶすlineTo() 指定位置まで線を延長するmoveTo() 指定位置まで移動するrect() 四角を描くstroke() 線を描く

canvas = document.getElementById('myCanvas');

canvas.width = window.innerWidth;canvas.height = window.innerHeight;! !if (!canvas) {! alert('Error: canvas element not found!');! return;}

if (!canvas.getContext) {! alert('Error: no canvas.getContext!');! return;}

context = canvas.getContext('2d');

if (!context) {! alert('Error: failed to get context!');! return;}

var canvas;var tool;







CanvasRenderingContext2D



! canvas.width = window.innerWidth;! canvas.height = window.innerHeight;! !if (!canvas) {! ! alert('Error: canvas element not found!');! return;}

if (!canvas.getContext) {! ! alert('Error: no canvas.getContext!');! return;}


if (!context) {! ! alert('Error: failed to get context!');! return;}

<canvas id="myCanvas">no canvas support</canvas>








! canvas.width = window.innerWidth;! canvas.height = window.innerHeight;! !if (!canvas) {! ! alert('Error: canvas element not found!');! return;}

if (!canvas.getContext) {! ! alert('Error: no canvas.getContext!');! return;}


if (!context) {! ! alert('Error: failed to get context!');! return;}

<canvas id="myCanvas">no canvas support</canvas>






canvasサポートのチェック（×Windows v12，v13 + Internet Explorer 8）

var container = canvas.parentNode;

tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}

tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);

contextTemp = tempCanvas.getContext('2d');

var tool_select = document.getElementById('dtool');

if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}

tool_select.addEventListener('change', ev_tool_change, false);

var tempCanvas;var contextTemp;
















function img_update () {! context.drawImage(tempCanvas, 0, 0);! contextTemp.clearRect(0, 0, tempCanvas.width, tempCanvas.height);}

















一時コンテキストに描画した後に転写

















一時コンテキストに描画した後に転写

ダイレクトの

描画した場合

，

やり直しが効

かない!!

（ビットマッ

プ画像）
















<select id="dtool" style="visibility:hidden;">! <option value="line">Line</option>! <option value="rect">Rectangle</option>! <option value="pencil">Pencil</option>! <option value="circle">Circle</option>! <option value="eraser">Eraser</option>! <option value="rectFill">Solid Rectangle</option>! <option value="circleFill">Solid Circle</option></select>

function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}


















イベントリスナーでツールを切り替え

! var tool_default = 'line';

! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_default;! }

! tempCanvas.addEventListener('mousedown', ev_canvas, false);! tempCanvas.addEventListener('mousemove', ev_canvas, false);! tempCanvas.addEventListener('mouseup', ev_canvas, false););

! function ev_canvas (ev) {! ! if (ev.layerX || ev.layerX == 0) { // Firefox! ! ! ev._x = ev.layerX;! ! ! ev._y = ev.layerY;! ! } else if (ev.offsetX || ev.offsetX == 0) { // Opera! ! ! ev._x = ev.offsetX;! ! ! ev._y = ev.offsetY;! ! }

! ! var func = tool[ev.type];! ! if (func) {! ! ! func(ev);! ! }! }

var tool;var tools = {};























マウスイベント























canvas内の相対座標を ev._x, ev._y に格納（マウスイベント共通）

ペイントツールえんぴつ（フリーライン）


WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)



function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}






function fireEvent(element,event){! if (document.createEventObject){! // for IE! var evt = document.createEventObject();! return element.fireEvent('on'+event,evt);! }! else{! // for others! var evt = document.createEvent('HTMLEvents');! evt.initEvent(event, true, true); // bubbling,cancellable! return !element.dispatchEvent(evt);! }}





















イベントリスナーでツールを切り替え




















‘pencil’







‘pencil’‘pencil’




function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }} tools[‘pencil’]



‘pencil’‘pencil’







tools[‘pencil’]







tools[‘pencil’]

tools.pencil







tools.pencil = function () {! var tool = this;! this.started = false;

! this.mousedown = function (ev) {! ! contextTemp.beginPath();! ! contextTemp.moveTo(ev._x, ev._y);! ! tool.started = true;! ! saveImage();! };

! this.mousemove = function (ev) {! ! if (tool.started) {! ! ! contextTemp.lineTo(ev._x, ev._y);! ! ! contextTemp.stroke();! ! }! };

! this.mouseup = function (ev) {! ! if (tool.started) {! ! ! tool.mousemove(ev);! ! ! tool.started = false;! ! ! img_update();! ! }! };};

tools.pencil

ペイントツールライン色

intColor:=Select RGB color (intColor)$hexColor:=UTIL_IntToHex (intColor)WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeColor";*;$hexColor)

function changeColor(hexColor) {! var tempCanvas = document.getElementById('myCanvasTemp');! var tempContext = tempCanvas.getContext('2d');! color = hexColor;! tempContext.strokeStyle = hexColor;}

ペイントツールライン幅

function changeStrokeWidth(lWidth) {! var tempCanvas = document.getElementById('myCanvasTemp');! var tempContext = tempCanvas.getContext('2d');! strokeWidth = lWidth;! tempContext.lineWidth = lWidth;}

WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeStrokeWidth";*;size)

ペイントツール書き出し

function getData() {! var canvas = document.getElementById('myCanvas'); ! var strData = canvas.toDataURL('image/png');! return strData;}

WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"getData";image)TEXT TO BLOB (image;$image_blob)CREATE RECORD ([Images])[Images]image_name:=imageName[Images]image_data:=$image_blob SAVE RECORD ([Images])

ペイントツール読み込み

function loadImage(imageSource) {var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d');var imageObject = new Image();imageObject.onload = function() {

context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(imageObject, 0, 0, canvas.width, canvas.height);

}; imageObject.src = imageSource;

}

WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"loadImage";*;image)

ペイントツールリンク

ペイントツールリンク

http://muro.deviantart.com

http://www.mrdoob.com/projects/harmony/

http://muro.deviantart.com


Technology

Paint Tool 2013-05-14