Paint Tool 2013-05-14
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Paint Tool 2013-05-14

on

  • 668 views

sample database posted on GitHub:

sample database posted on GitHub:

https://github.com/miyako/4d-widget-paint-tool

Statistics

Views

Total Views
668
Views on SlideShare
667
Embed Views
1

Actions

Likes
0
Downloads
3
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Paint Tool 2013-05-14 Presentation Transcript

  • 1. ペイントツール
  • 2. ペイントツール
  • 3. ペイントツール描画ツール
  • 4. ペイントツール描画ツールポインティングデバイス
  • 5. ペイントツール描画ツールDraw系ドローPaint系ペイントポインティングデバイス
  • 6. ペイントツール描画ツールDraw系ドローPaint系ペイントVector形式ベクターRaster形式ラスターポインティングデバイス
  • 7. ペイントツール描画ツールDraw系ドローPaint系ペイントVector形式ベクターRaster形式ラスターピクセル座標・方向・距離ポインティングデバイス
  • 8. ペイントツール描画ツールDraw系ドローPaint系ペイントVector形式ベクターRaster形式ラスターピクセル座標・方向・距離ポインティングデバイス
  • 9. ペイントツール描画ツールDraw系ドローPaint系ペイントVector形式ベクターRaster形式ラスターピクセル座標・方向・距離ポインティングデバイス
  • 10. マッシュアップ
  • 11. マッシュアップWebプログラミング
  • 12. マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)
  • 13. マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)
  • 14. マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)ITの深い知識がなくても,既存のWebサービスを組み合わせて,短期間でアプリケーション開発ができることから,新しい開発技法として注目されている。
  • 15. マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)ITの深い知識がなくても,既存のWebサービスを組み合わせて,短期間でアプリケーション開発ができることから,新しい開発技法として注目されている。
  • 16. マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)ITの深い知識がなくても,既存のWebサービスを組み合わせて,短期間でアプリケーション開発ができることから,新しい開発技法として注目されている。
  • 17. マッシュアップ4D
  • 18. マッシュアップ4DWebエリアを活用し,HTML/CSS/JavaScriptのAPIを組み合わせ, あたかもひとつのデスクトップアプリケーションのようにする開発技法。
  • 19. マッシュアップ4DWebエリアを活用し,HTML/CSS/JavaScriptのAPIを組み合わせ, あたかもひとつのデスクトップアプリケーションのようにする開発技法。
  • 20. マッシュアップ4DWebエリアを活用し,HTML/CSS/JavaScriptのAPIを組み合わせ, あたかもひとつのデスクトップアプリケーションのようにする開発技法。
  • 21. マッシュアップ4DWebエリアを活用し,HTML/CSS/JavaScriptのAPIを組み合わせ, あたかもひとつのデスクトップアプリケーションのようにする開発技法。
  • 22. HTML5
  • 23. HTML5<canvas> <svg>プログラミング言語 手続型 宣言型API ローレベル ハイレベル画像形式 ビットマップ ベクター(XML)レンダリング サイズに比例 オブジェクト数に比例オブジェクト操作 無理 容易
  • 24. HTML5<canvas> <svg>プログラミング言語 手続型 宣言型API ローレベル ハイレベル画像形式 ビットマップ ベクター(XML)レンダリング サイズに比例 オブジェクト数に比例オブジェクト操作 無理 容易
  • 25. HTML5<canvas>プログラミング言語 手続型API ローレベル画像形式 ビットマップレンダリング サイズに比例オブジェクト操作 無理<svg>宣言型ハイレベルベクター(XML)オブジェクト数に比例容易
  • 26. HTML5<canvas>プログラミング言語 手続型API ローレベル画像形式 ビットマップレンダリング サイズに比例オブジェクト操作 無理<svg>宣言型ハイレベルベクター(XML)オブジェクト数に比例容易JavaScript
  • 27. HTML5<canvas>プログラミング言語 手続型API ローレベル画像形式 ビットマップレンダリング サイズに比例オブジェクト操作 無理<svg>宣言型ハイレベルベクター(XML)オブジェクト数に比例容易JavaScript高速!!
  • 28. HTML5<canvas>プログラミング言語 手続型API ローレベル画像形式 ビットマップレンダリング サイズに比例オブジェクト操作 無理<svg>宣言型ハイレベルベクター(XML)オブジェクト数に比例容易JavaScript高速!!
  • 29. JavaScript
  • 30. JavaScriptWebブラウザで実行できるプログラミング言語
  • 31. JavaScriptWebブラウザで実行できるプログラミング言語
  • 32. JavaScriptWebブラウザで実行できるプログラミング言語
  • 33. Webエリア
  • 34. WebエリアWebブラウザと同等の機能を有するフォームオブジェクト
  • 35. WebエリアWebブラウザと同等の機能を有するフォームオブジェクト
  • 36. WebエリアWebブラウザと同等の機能を有するフォームオブジェクト
  • 37. WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4
  • 38. WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4
  • 39. WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4InternetExplorerSafari
  • 40. WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4InternetExplorerSafariIntegratedWebKit
  • 41. WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4InternetExplorerSafariIntegratedWebKitWA OPEN URLWA Execute JavaScriptWA EXECUTE JAVASCRIPT FUNCTIONWA SET PAGE CONTENT// HTMLを表示 // JavaScriptを実行
  • 42. Webエリア
  • 43. WebエリアWA OPEN URLWA SET PAGE CONTENT
  • 44. WebエリアWA OPEN URLWA SET PAGE CONTENTページの場所をシステムパスまたはURLを指定ページの内容をHTMLで指定
  • 45. WebエリアWA OPEN URLWA SET PAGE CONTENTページの場所をシステムパスまたはURLを指定ページの内容をHTMLで指定追加リソースを相対パスで指定できる追加リソースを相対パスで指定できるのはMacのみ(ベースURL)
  • 46. WebエリアWA OPEN URLシステムパスまたはURLを指定WA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File.htmlWA SET PAGE CONTENTfile:///C:/MyFolder/My%20File.htmlfile:///MyFolder/My%20File.html// URL
  • 47. WebエリアWA OPEN URLシステムパスまたはURLを指定WA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File.htmlWA SET PAGE CONTENTfile:///C:/MyFolder/My%20File.htmlfile:///MyFolder/My%20File.html// URL
  • 48. WebエリアWA OPEN URLシステムパスまたはURLを指定WA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File.htmlWA SET PAGE CONTENTfile:///C:/MyFolder/My%20File.htmlfile:///MyFolder/My%20File.html// URL
  • 49. WebエリアWA OPEN URLシステムパスをPOSIXパスに変換WA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File.htmlConvert path system to POSIXWA SET PAGE CONTENTC:/MyFolder/My File.html/MyFolder/My File.html// POSIX
  • 50. WebエリアWA OPEN URLシステムパスをPOSIXパスに変換してURLエスケープWA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File.htmlWA SET PAGE CONTENTC:/MyFolder/My%20File.html/MyFolder/My%20File.html// ?Convert path system to POSIX (...;*)
  • 51. WebエリアWA OPEN URLシステムパスをURLに変換WA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File.htmlWA SET PAGE CONTENTfile:///C:/MyFolder/My%20File.htmlfile:////MyFolder/My%20File.html// URL (Windows)“file:///”+Convert path system to POSIX (...;*)
  • 52. WebエリアWA OPEN URLシステムパスをURLに変換WA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File.htmlWA SET PAGE CONTENTfile://C:/MyFolder/My%20File.htmlfile:///MyFolder/My%20File.html// URL (Mac OS)“file://”+Convert path system to POSIX (...;*)
  • 53. WebエリアベースURL*Mac Only
  • 54. WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる
  • 55. WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></script><link rel=”stylesheet” href=”css/style.css” /></head>
  • 56. WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></script><link rel=”stylesheet” href=”css/style.css” /></head>
  • 57. WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる<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/”)
  • 58. WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる<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/”)
  • 59. WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる<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/”)
  • 60. Webエリアキャッシュ
  • 61. WebエリアキャッシュWebエリアがロードしたファイルはキャッシュされることも・・・
  • 62. WebエリアキャッシュWebエリアがロードしたファイルはキャッシュされることも・・・WA SET PAGE CONTENTで渡したHTMLはキャッシュされない
  • 63. WebエリアローカルHTMLファイル使用のポイント
  • 64. WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス
  • 65. WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL
  • 66. WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL● 単一ファイル,絶対パス▲ 複数ファイル,<base>,相対パス
  • 67. WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL● 単一ファイル,絶対パス▲ 複数ファイル,<base>,相対パスプラットフォーム注意
  • 68. WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL● 単一ファイル,絶対パス▲ 複数ファイル,<base>,相対パスキャッシュ注意プラットフォーム注意
  • 69. WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL● 単一ファイル,絶対パス▲ 複数ファイル,<base>,相対パスキャッシュ注意プラットフォーム注意プラットフォーム・キャッシュ注意
  • 70. Webエリアドラッグ&ドロップでページを移動しないために
  • 71. Webエリアドラッグ&ドロップでページを移動しないために<body ondragover="return false;" ondrop="return false;"></body>
  • 72. Webエリアフォームイベント
  • 73. 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)
  • 74. WebエリアフォームイベントOn URL Filtering$url:=WA Get last filtered URLOn 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)
  • 75. WebエリアフォームイベントOn URL Filtering$url:=WA Get last filtered URL
  • 76. WebエリアフォームイベントOn URL Filtering$url:=WA Get last filtered URL
  • 77. Webエリアフォームイベントfunction clearCanvas () {window.location = "http://clearCanvas/";}On URL Filtering$url:=WA Get last filtered URL
  • 78. Webエリアフォームイベントfunction clearCanvas () {window.location = "http://clearCanvas/";}
  • 79. WebエリアフォームイベントOn ClickedWA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)function clearCanvas () {window.location = "http://clearCanvas/";}
  • 80. WebエリアフォームイベントOn ClickedWA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)function clearCanvas () {window.location = "http://clearCanvas/";}On URL Filtering$url:=WA Get last filtered URL
  • 81. Webエリア
  • 82. ペイントツールCanvasRenderingContext2Dメソッド 説明arc() 曲線・円・弧beginPath() 線の始点を決めるclosePath() 現在位置から始点まで戻るfill() 線の内側を塗りつぶすlineTo() 指定位置まで線を延長するmoveTo() 指定位置まで移動するrect() 四角を描くstroke() 線を描く
  • 83. 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;
  • 84. 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
  • 85. var canvas;var tool;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;}<canvas id="myCanvas">no canvas support</canvas>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;}
  • 86. var canvas;var tool;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;}<canvas id="myCanvas">no canvas support</canvas>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;}canvasサポートのチェック(×Windows v12,v13 + Internet Explorer 8)
  • 87. 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;
  • 88. var tempCanvas;var contextTemp;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 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);function img_update () {! context.drawImage(tempCanvas, 0, 0);! contextTemp.clearRect(0, 0, tempCanvas.width, tempCanvas.height);}
  • 89. var tempCanvas;var contextTemp;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 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);function img_update () {! context.drawImage(tempCanvas, 0, 0);! contextTemp.clearRect(0, 0, tempCanvas.width, tempCanvas.height);}一時コンテキストに描画した後に転写
  • 90. var tempCanvas;var contextTemp;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 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);function img_update () {! context.drawImage(tempCanvas, 0, 0);! contextTemp.clearRect(0, 0, tempCanvas.width, tempCanvas.height);}一時コンテキストに描画した後に転写ダイレクトの描画した場合,やり直しが効かない!!(ビットマップ画像)
  • 91. var tempCanvas;var contextTemp;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 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);<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]();! }}
  • 92. var tempCanvas;var contextTemp;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 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);<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]();! }}イベントリスナーでツールを切り替え
  • 93. ! 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 = {};
  • 94. ! 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 = {};! 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);! ! }! }
  • 95. ! 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 = {};! 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);! ! }! }マウスイベント
  • 96. ! 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 = {};! 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);! ! }! }
  • 97. ! 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 = {};! 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);! ! }! }canvas内の相対座標を ev._x, ev._y に格納(マウスイベント共通)
  • 98. ペイントツールえんぴつ(フリーライン)
  • 99. ペイントツールえんぴつ(フリーライン)WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
  • 100. ペイントツールえんぴつ(フリーライン)WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)function changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,change);}
  • 101. ペイントツールえんぴつ(フリーライン)WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)function changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,change);}
  • 102. ペイントツール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);! }}
  • 103. ペイントツール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);! }}
  • 104. var tempCanvas;var contextTemp;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 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);<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]();! }}イベントリスナーでツールを切り替え
  • 105. ペイントツール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);! }}
  • 106. ペイントツール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);! }}function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}
  • 107. ペイントツール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);! }}function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)function changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,change);}
  • 108. ペイントツール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);! }}function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)function changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,change);}pencil
  • 109. ペイントツール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);! }}function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)function changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,change);}pencilpencil
  • 110. ペイントツール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);! }}function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}tools[ pencil ]WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)function changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,change);}pencilpencil
  • 111. ペイントツール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);! }}function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)function changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,change);}tools[ pencil ]
  • 112. ペイントツール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);! }}function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)function changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,change);}tools[ pencil ]tools.pencil
  • 113. ペイントツール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);! }}function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)function changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,change);}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
  • 114. ペイントツールライン色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;}
  • 115. ペイントツールライン幅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)
  • 116. ペイントツール書き出し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_blobSAVE RECORD ([Images])
  • 117. ペイントツール読み込み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)
  • 118. ペイントツールリンク
  • 119. ペイントツールリンクhttp://muro.deviantart.comhttp://www.mrdoob.com/projects/harmony/http://muro.deviantart.com
  • 120. ペイントツール