Paint Tool 2013-05-14

639 views

Published on

sample database posted on GitHub:

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
639
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Paint Tool 2013-05-14

  1. 1. ペイントツール
  2. 2. ペイントツール
  3. 3. ペイントツール描画ツール
  4. 4. ペイントツール描画ツールポインティングデバイス
  5. 5. ペイントツール描画ツールDraw系ドローPaint系ペイントポインティングデバイス
  6. 6. ペイントツール描画ツールDraw系ドローPaint系ペイントVector形式ベクターRaster形式ラスターポインティングデバイス
  7. 7. ペイントツール描画ツールDraw系ドローPaint系ペイントVector形式ベクターRaster形式ラスターピクセル座標・方向・距離ポインティングデバイス
  8. 8. ペイントツール描画ツールDraw系ドローPaint系ペイントVector形式ベクターRaster形式ラスターピクセル座標・方向・距離ポインティングデバイス
  9. 9. ペイントツール描画ツールDraw系ドローPaint系ペイントVector形式ベクターRaster形式ラスターピクセル座標・方向・距離ポインティングデバイス
  10. 10. マッシュアップ
  11. 11. マッシュアップWebプログラミング
  12. 12. マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)
  13. 13. マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)
  14. 14. マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)ITの深い知識がなくても,既存のWebサービスを組み合わせて,短期間でアプリケーション開発ができることから,新しい開発技法として注目されている。
  15. 15. マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)ITの深い知識がなくても,既存のWebサービスを組み合わせて,短期間でアプリケーション開発ができることから,新しい開発技法として注目されている。
  16. 16. マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)ITの深い知識がなくても,既存のWebサービスを組み合わせて,短期間でアプリケーション開発ができることから,新しい開発技法として注目されている。
  17. 17. マッシュアップ4D
  18. 18. マッシュアップ4DWebエリアを活用し,HTML/CSS/JavaScriptのAPIを組み合わせ, あたかもひとつのデスクトップアプリケーションのようにする開発技法。
  19. 19. マッシュアップ4DWebエリアを活用し,HTML/CSS/JavaScriptのAPIを組み合わせ, あたかもひとつのデスクトップアプリケーションのようにする開発技法。
  20. 20. マッシュアップ4DWebエリアを活用し,HTML/CSS/JavaScriptのAPIを組み合わせ, あたかもひとつのデスクトップアプリケーションのようにする開発技法。
  21. 21. マッシュアップ4DWebエリアを活用し,HTML/CSS/JavaScriptのAPIを組み合わせ, あたかもひとつのデスクトップアプリケーションのようにする開発技法。
  22. 22. HTML5
  23. 23. HTML5<canvas> <svg>プログラミング言語 手続型 宣言型API ローレベル ハイレベル画像形式 ビットマップ ベクター(XML)レンダリング サイズに比例 オブジェクト数に比例オブジェクト操作 無理 容易
  24. 24. HTML5<canvas> <svg>プログラミング言語 手続型 宣言型API ローレベル ハイレベル画像形式 ビットマップ ベクター(XML)レンダリング サイズに比例 オブジェクト数に比例オブジェクト操作 無理 容易
  25. 25. HTML5<canvas>プログラミング言語 手続型API ローレベル画像形式 ビットマップレンダリング サイズに比例オブジェクト操作 無理<svg>宣言型ハイレベルベクター(XML)オブジェクト数に比例容易
  26. 26. HTML5<canvas>プログラミング言語 手続型API ローレベル画像形式 ビットマップレンダリング サイズに比例オブジェクト操作 無理<svg>宣言型ハイレベルベクター(XML)オブジェクト数に比例容易JavaScript
  27. 27. HTML5<canvas>プログラミング言語 手続型API ローレベル画像形式 ビットマップレンダリング サイズに比例オブジェクト操作 無理<svg>宣言型ハイレベルベクター(XML)オブジェクト数に比例容易JavaScript高速!!
  28. 28. HTML5<canvas>プログラミング言語 手続型API ローレベル画像形式 ビットマップレンダリング サイズに比例オブジェクト操作 無理<svg>宣言型ハイレベルベクター(XML)オブジェクト数に比例容易JavaScript高速!!
  29. 29. JavaScript
  30. 30. JavaScriptWebブラウザで実行できるプログラミング言語
  31. 31. JavaScriptWebブラウザで実行できるプログラミング言語
  32. 32. JavaScriptWebブラウザで実行できるプログラミング言語
  33. 33. Webエリア
  34. 34. WebエリアWebブラウザと同等の機能を有するフォームオブジェクト
  35. 35. WebエリアWebブラウザと同等の機能を有するフォームオブジェクト
  36. 36. WebエリアWebブラウザと同等の機能を有するフォームオブジェクト
  37. 37. WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4
  38. 38. WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4
  39. 39. WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4InternetExplorerSafari
  40. 40. WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4InternetExplorerSafariIntegratedWebKit
  41. 41. WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4InternetExplorerSafariIntegratedWebKitWA OPEN URLWA Execute JavaScriptWA EXECUTE JAVASCRIPT FUNCTIONWA SET PAGE CONTENT// HTMLを表示 // JavaScriptを実行
  42. 42. Webエリア
  43. 43. WebエリアWA OPEN URLWA SET PAGE CONTENT
  44. 44. WebエリアWA OPEN URLWA SET PAGE CONTENTページの場所をシステムパスまたはURLを指定ページの内容をHTMLで指定
  45. 45. WebエリアWA OPEN URLWA SET PAGE CONTENTページの場所をシステムパスまたはURLを指定ページの内容をHTMLで指定追加リソースを相対パスで指定できる追加リソースを相対パスで指定できるのはMacのみ(ベースURL)
  46. 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. 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. 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. 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. 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. 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. 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. 53. WebエリアベースURL*Mac Only
  54. 54. WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる
  55. 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. 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. 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. 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. 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. 60. Webエリアキャッシュ
  61. 61. WebエリアキャッシュWebエリアがロードしたファイルはキャッシュされることも・・・
  62. 62. WebエリアキャッシュWebエリアがロードしたファイルはキャッシュされることも・・・WA SET PAGE CONTENTで渡したHTMLはキャッシュされない
  63. 63. WebエリアローカルHTMLファイル使用のポイント
  64. 64. WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス
  65. 65. WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL
  66. 66. WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL● 単一ファイル,絶対パス▲ 複数ファイル,<base>,相対パス
  67. 67. WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL● 単一ファイル,絶対パス▲ 複数ファイル,<base>,相対パスプラットフォーム注意
  68. 68. WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL● 単一ファイル,絶対パス▲ 複数ファイル,<base>,相対パスキャッシュ注意プラットフォーム注意
  69. 69. WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL● 単一ファイル,絶対パス▲ 複数ファイル,<base>,相対パスキャッシュ注意プラットフォーム注意プラットフォーム・キャッシュ注意
  70. 70. Webエリアドラッグ&ドロップでページを移動しないために
  71. 71. Webエリアドラッグ&ドロップでページを移動しないために<body ondragover="return false;" ondrop="return false;"></body>
  72. 72. Webエリアフォームイベント
  73. 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. 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. 75. WebエリアフォームイベントOn URL Filtering$url:=WA Get last filtered URL
  76. 76. WebエリアフォームイベントOn URL Filtering$url:=WA Get last filtered URL
  77. 77. Webエリアフォームイベントfunction clearCanvas () {window.location = "http://clearCanvas/";}On URL Filtering$url:=WA Get last filtered URL
  78. 78. Webエリアフォームイベントfunction clearCanvas () {window.location = "http://clearCanvas/";}
  79. 79. WebエリアフォームイベントOn ClickedWA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)function clearCanvas () {window.location = "http://clearCanvas/";}
  80. 80. WebエリアフォームイベントOn ClickedWA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)function clearCanvas () {window.location = "http://clearCanvas/";}On URL Filtering$url:=WA Get last filtered URL
  81. 81. Webエリア
  82. 82. ペイントツールCanvasRenderingContext2Dメソッド 説明arc() 曲線・円・弧beginPath() 線の始点を決めるclosePath() 現在位置から始点まで戻るfill() 線の内側を塗りつぶすlineTo() 指定位置まで線を延長するmoveTo() 指定位置まで移動するrect() 四角を描くstroke() 線を描く
  83. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 98. ペイントツールえんぴつ(フリーライン)
  99. 99. ペイントツールえんぴつ(フリーライン)WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
  100. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 118. ペイントツールリンク
  119. 119. ペイントツールリンクhttp://muro.deviantart.comhttp://www.mrdoob.com/projects/harmony/http://muro.deviantart.com
  120. 120. ペイントツール

×