Paint Tool 2013-05-14

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

描画ツール
ポインティングデバイス

描画ツール
Draw系
ドロー
Paint系
ペイント

描画ツール
Draw系
ドロー
Paint系
ペイント
Vector形式
ベクター
Raster形式
ラスター

描画ツール
Draw系
ドロー
Paint系
ペイント
Vector形式
ベクター
Raster形式
ラスター
ピクセル座標・方向・距離

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

複数のWebサービスのAPIを組み合わせ，あたかも
ひとつのWebサービスのようにする機能のこと。
http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)

複数のWebサービスのAPIを組み合わせ，あたかも
ひとつのWebサービスのようにする機能のこと。
http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)
ITの深い知識がなくても，既存のWebサービスを組
み合わせて，短期間でアプリケーション開発ができる
ことから，新しい開発技法として注目されている。

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

HTML5
<canvas> <svg>
プログラミング言語手続型宣言型
API ローレベルハイレベル
画像形式ビットマップベクター（XML）
レンダリングサイズに比例オブジェクト数に比例
オブジェクト操作無理容易

HTML5
<canvas>
プログラミング言語手続型
API ローレベル
画像形式ビットマップ
レンダリングサイズに比例
オブジェクト操作無理
<svg>
宣言型
ハイレベル
ベクター（XML）
オブジェクト数に比例
容易

HTML5
<canvas>
API ローレベル
<svg>
宣言型
ハイレベル
容易
JavaScript

HTML5
<canvas>
API ローレベル
<svg>
宣言型
ハイレベル
容易
JavaScript
高速!!

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

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

Webエリア
Internet
Explorer 7
Safari 4

Webエリア
Internet
Explorer 7
Safari 4
Internet
Explorer
Safari

Webエリア
Internet
Explorer 7
Safari 4
Internet
Explorer
Safari
Integrated
WebKit

Webエリア
Internet
Explorer 7
Safari 4
Internet
Explorer
Safari
Integrated
WebKit
WA OPEN URL
WA Execute JavaScript
WA EXECUTE JAVASCRIPT FUNCTION
WA SET PAGE CONTENT
// HTMLを表示 // JavaScriptを実行

Webエリア
WA OPEN URL
WA SET PAGE CONTENT

Webエリア
WA OPEN URL
WA SET PAGE CONTENT
ページの場所をシステムパスまたはURLを指定
ページの内容をHTMLで指定

Webエリア
WA OPEN URL
WA SET PAGE CONTENT
ページの場所をシステムパスまたはURLを指定
ページの内容をHTMLで指定
追加リソースを相対パスで指定できる
追加リソースを相対パスで指定できるのはMacのみ（ベースURL）

Webエリア
WA OPEN URL
システムパスまたはURLを指定
WA SET PAGE CONTENT
HTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENT
file:///C:/MyFolder/My%20File.html
file:///MyFolder/My%20File.html
// URL

Webエリア
WA OPEN URL
システムパスをPOSIXパスに変換
WA SET PAGE CONTENT
HTMLを指定
Convert path system to POSIX
WA SET PAGE CONTENT
C:/MyFolder/My File.html
/MyFolder/My File.html
// POSIX

Webエリア
WA OPEN URL
システムパスをPOSIXパスに変換してURLエスケープ
WA SET PAGE CONTENT
HTMLを指定
WA SET PAGE CONTENT
C:/MyFolder/My%20File.html
/MyFolder/My%20File.html
// ?
Convert path system to POSIX (...;*)

Webエリア
WA OPEN URL
システムパスをURLに変換
WA SET PAGE CONTENT
HTMLを指定
WA SET PAGE CONTENT
file:///C:/MyFolder/My%20File.html
file:////MyFolder/My%20File.html
// URL (Windows)
“file:///”+Convert path system to POSIX (...;*)

Webエリア
WA OPEN URL
システムパスをURLに変換
WA SET PAGE CONTENT
HTMLを指定
WA SET PAGE CONTENT
file://C:/MyFolder/My%20File.html
file:///MyFolder/My%20File.html
// URL (Mac OS)
“file://”+Convert path system to POSIX (...;*)

Webエリア
ベースURL
*Mac Only

Webエリア
ベースURL
*Mac Only
WA SET PAGE CONTENTでも相対パスが指定できる

Webエリア
ベースURL
*Mac Only
<head>
<base href=”file:///MyFolder/” />
<script src=”js/jquery.js”></script>
<link rel=”stylesheet” href=”css/style.css” />
</head>

Webエリア
ベースURL
*Mac Only
<head>
<base href=”file:///MyFolder/” />
<script src=”js/jquery.js”></script>
<link rel=”stylesheet” href=”css/style.css” />
</head>
WA SET PAGE CONTENT (...;...;”file:///MyFolder/”)

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

Webエリア
キャッシュ
Webエリアがロードしたファイルはキャッシュされることも・・・
WA SET PAGE CONTENTで渡したHTMLはキャッシュされない

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

Webエリア
● URL (ﬁle://)
▲ システムパス

Webエリア
● URL (ﬁle://)
● WA SET PAGE CONTENT
▲ WA OPEN URL

Webエリア
● URL (ﬁle://)
▲ WA OPEN URL
● 単一ファイル，絶対パス
▲ 複数ファイル，<base>，相対パス

Webエリア
● URL (ﬁle://)
▲ WA OPEN URL
プラットフォーム注意

Webエリア
● URL (ﬁle://)
▲ WA OPEN URL
キャッシュ注意

Webエリア
● URL (ﬁle://)
▲ WA OPEN URL
キャッシュ注意
プラットフォーム・キャッシュ注意

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

Webエリア
ドラッグ＆ドロップでページを移動しないために
<body ondragover="return false;" ondrop="return false;">
</body>

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

Webエリア
On End URL Loading
$filter{1}:="http://*"
$access{1}:=False
WA SET URL FILTERS (*;...;$filter;$access)
On Load
WA OPEN URL/WA SET PAGE CONTENT
WA SET PREFERENCE (*;...;wa enable JavaScript;True)

Webエリア
On URL Filtering
$url:=WA Get last filtered URL
On End URL Loading
$filter{1}:="http://*"
$access{1}:=False
WA SET URL FILTERS (*;...;$filter;$access)
On Load
WA OPEN URL/WA SET PAGE CONTENT
WA SET PREFERENCE (*;...;wa enable JavaScript;True)

Webエリア
On URL Filtering

Webエリア
function clearCanvas () {
window.location = "http://clearCanvas/";
}
On URL Filtering

Webエリア
}

Webエリア
On Clicked
WA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)
}

Webエリア
On Clicked
WA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)
}
On URL Filtering

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;

! !
if (!canvas) {
! return;
}
! return;
}
if (!context) {
! return;
}
var canvas;
var tool;
CanvasRenderingContext2D

var canvas;
var tool;
! canvas.width = window.innerWidth;
! canvas.height = window.innerHeight;
! !
if (!canvas) {
! ! alert('Error: canvas element not found!');
! return;
}
! ! alert('Error: no canvas.getContext!');
! return;
}
if (!context) {
! ! alert('Error: failed to get context!');
! return;
}
<canvas id="myCanvas">no canvas support</canvas>
! !
if (!canvas) {
! return;
}
! return;
}
if (!context) {
! return;
}

var canvas;
var tool;
! canvas.width = window.innerWidth;
! canvas.height = window.innerHeight;
! !
if (!canvas) {
! ! alert('Error: canvas element not found!');
! return;
}
! ! alert('Error: no canvas.getContext!');
! return;
}
if (!context) {
! ! alert('Error: failed to get context!');
! return;
}
<canvas id="myCanvas">no canvas support</canvas>
! !
if (!canvas) {
! return;
}
! return;
}
if (!context) {
! return;
}
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;

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

var tempCanvas;
var contextTemp;
!
if (!tempCanvas) {
! return;
}
if (!tool_select) {
! return;
}
!
if (!tempCanvas) {
! return;
}
if (!tool_select) {
! return;
}
}
一時コンテキストに描画した後に転写

var tempCanvas;
var contextTemp;
!
if (!tempCanvas) {
! return;
}
if (!tool_select) {
! return;
}
!
if (!tempCanvas) {
! return;
}
if (!tool_select) {
! return;
}
}
一時コンテキストに描画した後に転写
ダイレクトの描画した場合，
やり直しが効かない!!
（ビットマップ画像）

var tempCanvas;
var contextTemp;
!
if (!tempCanvas) {
! return;
}
if (!tool_select) {
! return;
}
!
if (!tempCanvas) {
! return;
}
if (!tool_select) {
! return;
}
<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 tempCanvas;
var contextTemp;
!
if (!tempCanvas) {
! return;
}
if (!tool_select) {
! return;
}
!
if (!tempCanvas) {
! return;
}
if (!tool_select) {
! return;
}
<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>
! }
}
イベントリスナーでツールを切り替え

! 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 = {};

! }
! ! }
! ! if (func) {
! ! ! func(ev);
! ! }
! }
var tool;
var tools = {};
! }
! ! }
! ! if (func) {
! ! ! func(ev);
! ! }
! }

! }
! ! }
! ! if (func) {
! ! ! func(ev);
! ! }
! }
var tool;
var tools = {};
! }
! ! }
! ! if (func) {
! ! ! func(ev);
! ! }
! }
マウスイベント

! }
! ! }
! ! if (func) {
! ! ! func(ev);
! ! }
! }
var tool;
var tools = {};
! }
! ! }
! ! if (func) {
! ! ! func(ev);
! ! }
! }
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);
! }
}

}
! // for IE
! }
! else{
! // for others
! }
}
! }
}

}
! // for IE
! }
! else{
! // for others
! }
}
! }
}
}

}
! // for IE
! }
! else{
! // for others
! }
}
! }
}
}
pencil

}
! // for IE
! }
! else{
! // for others
! }
}
! }
}
}
pencil
pencil

}
! // for IE
! }
! else{
! // for others
! }
}
! }
}
tools[ pencil ]
}
pencil
pencil

}
! // for IE
! }
! else{
! // for others
! }
}
! }
}
}
tools[ pencil ]

}
! // for IE
! }
! else{
! // for others
! }
}
! }
}
}
tools[ pencil ]
tools.pencil

}
! // for IE
! }
! else{
! // for others
! }
}
! }
}
}
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

Paint Tool 2013-05-14

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

Similar to Paint Tool 2013-05-14

Similar to Paint Tool 2013-05-14 (20)

More from kmiyako

More from kmiyako (20)

Recently uploaded

Recently uploaded (14)

Paint Tool 2013-05-14