ペイントツール
ペイントツール
ペイントツール描画ツール
ペイントツール描画ツールポインティングデバイス
ペイントツール描画ツールDraw系ドローPaint系ペイントポインティングデバイス
ペイントツール描画ツールDraw系ドローPaint系ペイントVector形式ベクターRaster形式ラスターポインティングデバイス
ペイントツール描画ツールDraw系ドローPaint系ペイントVector形式ベクターRaster形式ラスターピクセル座標・方向・距離ポインティングデバイス
ペイントツール描画ツールDraw系ドローPaint系ペイントVector形式ベクターRaster形式ラスターピクセル座標・方向・距離ポインティングデバイス
ペイントツール描画ツールDraw系ドローPaint系ペイントVector形式ベクターRaster形式ラスターピクセル座標・方向・距離ポインティングデバイス
マッシュアップ
マッシュアップWebプログラミング
マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)
マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)
マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)ITの深い知識が...
マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)ITの深い知識が...
マッシュアップWebプログラミング複数のWebサービスのAPIを組み合わせ,あたかもひとつのWebサービスのようにする機能のこと。http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)ITの深い知識が...
マッシュアップ4D
マッシュアップ4DWebエリアを活用し,HTML/CSS/JavaScriptのAPIを組み合わせ, あたかもひとつのデスクトップアプリケーションのようにする開発技法。
マッシュアップ4DWebエリアを活用し,HTML/CSS/JavaScriptのAPIを組み合わせ, あたかもひとつのデスクトップアプリケーションのようにする開発技法。
マッシュアップ4DWebエリアを活用し,HTML/CSS/JavaScriptのAPIを組み合わせ, あたかもひとつのデスクトップアプリケーションのようにする開発技法。
マッシュアップ4DWebエリアを活用し,HTML/CSS/JavaScriptのAPIを組み合わせ, あたかもひとつのデスクトップアプリケーションのようにする開発技法。
HTML5
HTML5<canvas> <svg>プログラミング言語 手続型 宣言型API ローレベル ハイレベル画像形式 ビットマップ ベクター(XML)レンダリング サイズに比例 オブジェクト数に比例オブジェクト操作 無理 容易
HTML5<canvas> <svg>プログラミング言語 手続型 宣言型API ローレベル ハイレベル画像形式 ビットマップ ベクター(XML)レンダリング サイズに比例 オブジェクト数に比例オブジェクト操作 無理 容易
HTML5<canvas>プログラミング言語 手続型API ローレベル画像形式 ビットマップレンダリング サイズに比例オブジェクト操作 無理<svg>宣言型ハイレベルベクター(XML)オブジェクト数に比例容易
HTML5<canvas>プログラミング言語 手続型API ローレベル画像形式 ビットマップレンダリング サイズに比例オブジェクト操作 無理<svg>宣言型ハイレベルベクター(XML)オブジェクト数に比例容易JavaScript
HTML5<canvas>プログラミング言語 手続型API ローレベル画像形式 ビットマップレンダリング サイズに比例オブジェクト操作 無理<svg>宣言型ハイレベルベクター(XML)オブジェクト数に比例容易JavaScript高速!!
HTML5<canvas>プログラミング言語 手続型API ローレベル画像形式 ビットマップレンダリング サイズに比例オブジェクト操作 無理<svg>宣言型ハイレベルベクター(XML)オブジェクト数に比例容易JavaScript高速!!
JavaScript
JavaScriptWebブラウザで実行できるプログラミング言語
JavaScriptWebブラウザで実行できるプログラミング言語
JavaScriptWebブラウザで実行できるプログラミング言語
Webエリア
WebエリアWebブラウザと同等の機能を有するフォームオブジェクト
WebエリアWebブラウザと同等の機能を有するフォームオブジェクト
WebエリアWebブラウザと同等の機能を有するフォームオブジェクト
WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4
WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4
WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4InternetExplorerSafari
WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4InternetExplorerSafariIntegratedWebKit
WebエリアWebブラウザと同等の機能を有するフォームオブジェクトInternetExplorer 7Safari 4InternetExplorerSafariIntegratedWebKitWA OPEN URLWA Execute Jav...
Webエリア
WebエリアWA OPEN URLWA SET PAGE CONTENT
WebエリアWA OPEN URLWA SET PAGE CONTENTページの場所をシステムパスまたはURLを指定ページの内容をHTMLで指定
WebエリアWA OPEN URLWA SET PAGE CONTENTページの場所をシステムパスまたはURLを指定ページの内容をHTMLで指定追加リソースを相対パスで指定できる追加リソースを相対パスで指定できるのはMacのみ(ベースURL)
WebエリアWA OPEN URLシステムパスまたはURLを指定WA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File.h...
WebエリアWA OPEN URLシステムパスまたはURLを指定WA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File.h...
WebエリアWA OPEN URLシステムパスまたはURLを指定WA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File.h...
WebエリアWA OPEN URLシステムパスをPOSIXパスに変換WA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File...
WebエリアWA OPEN URLシステムパスをPOSIXパスに変換してURLエスケープWA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFold...
WebエリアWA OPEN URLシステムパスをURLに変換WA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File.htm...
WebエリアWA OPEN URLシステムパスをURLに変換WA SET PAGE CONTENTHTMLを指定// システムパスC:¥MyFolder¥My File.htmlMacintosh HD:MyFolder:My File.htm...
WebエリアベースURL*Mac Only
WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる
WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></sc...
WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></sc...
WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></sc...
WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></sc...
WebエリアベースURL*Mac OnlyWA SET PAGE CONTENTでも相対パスが指定できる<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></sc...
Webエリアキャッシュ
WebエリアキャッシュWebエリアがロードしたファイルはキャッシュされることも・・・
WebエリアキャッシュWebエリアがロードしたファイルはキャッシュされることも・・・WA SET PAGE CONTENTで渡したHTMLはキャッシュされない
WebエリアローカルHTMLファイル使用のポイント
WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス
WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL
WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL● 単一ファイル,絶対パス▲ 複数ファイル,<base>,相対パス
WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL● 単一ファイル,絶対パス▲ 複数ファイル,<base>,相対パスプラットフォーム注意
WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL● 単一ファイル,絶対パス▲ 複数ファイル,<base>,相対パスキャッシュ注意プ...
WebエリアローカルHTMLファイル使用のポイント● URL (file://)▲ システムパス● WA SET PAGE CONTENT▲ WA OPEN URL● 単一ファイル,絶対パス▲ 複数ファイル,<base>,相対パスキャッシュ注意プ...
Webエリアドラッグ&ドロップでページを移動しないために
Webエリアドラッグ&ドロップでページを移動しないために<body ondragover="return false;" ondrop="return false;"></body>
Webエリアフォームイベント
WebエリアフォームイベントOn End URL Loading$filter{1}:="http://*"$access{1}:=FalseWA SET URL FILTERS (*;...;$filter;$access)On LoadWA...
WebエリアフォームイベントOn URL Filtering$url:=WA Get last filtered URLOn End URL Loading$filter{1}:="http://*"$access{1}:=FalseWA SE...
WebエリアフォームイベントOn URL Filtering$url:=WA Get last filtered URL
WebエリアフォームイベントOn URL Filtering$url:=WA Get last filtered URL
Webエリアフォームイベントfunction clearCanvas () {window.location = "http://clearCanvas/";}On URL Filtering$url:=WA Get last filtered...
Webエリアフォームイベントfunction clearCanvas () {window.location = "http://clearCanvas/";}
WebエリアフォームイベントOn ClickedWA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)function clearCanvas () {window.location =...
WebエリアフォームイベントOn ClickedWA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)function clearCanvas () {window.location =...
Webエリア
ペイントツールCanvasRenderingContext2Dメソッド 説明arc() 曲線・円・弧beginPath() 線の始点を決めるclosePath() 現在位置から始点まで戻るfill() 線の内側を塗りつぶすlineTo() 指定...
canvas = document.getElementById(myCanvas);canvas.width = window.innerWidth;canvas.height = window.innerHeight;! !if (!can...
canvas = document.getElementById(myCanvas);canvas.width = window.innerWidth;canvas.height = window.innerHeight;! !if (!can...
var canvas;var tool;canvas = document.getElementById(myCanvas);! canvas.width = window.innerWidth;! canvas.height = window...
var canvas;var tool;canvas = document.getElementById(myCanvas);! canvas.width = window.innerWidth;! canvas.height = window...
var container = canvas.parentNode;tempCanvas = document.createElement(canvas);!if (!tempCanvas) {! alert(Error: cannot cre...
var tempCanvas;var contextTemp;var container = canvas.parentNode;tempCanvas = document.createElement(canvas);!if (!tempCan...
var tempCanvas;var contextTemp;var container = canvas.parentNode;tempCanvas = document.createElement(canvas);!if (!tempCan...
var tempCanvas;var contextTemp;var container = canvas.parentNode;tempCanvas = document.createElement(canvas);!if (!tempCan...
var tempCanvas;var contextTemp;var container = canvas.parentNode;tempCanvas = document.createElement(canvas);!if (!tempCan...
var tempCanvas;var contextTemp;var container = canvas.parentNode;tempCanvas = document.createElement(canvas);!if (!tempCan...
! var tool_default = line;! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_de...
! var tool_default = line;! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_de...
! var tool_default = line;! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_de...
! var tool_default = line;! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_de...
! var tool_default = line;! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_de...
ペイントツールえんぴつ(フリーライン)
ペイントツールえんぴつ(フリーライン)WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
ペイントツールえんぴつ(フリーライン)WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)function changeDrawTool(drawT...
ペイントツールえんぴつ(フリーライン)WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)function changeDrawTool(drawT...
ペイントツールfunction changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool ...
ペイントツールfunction changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool ...
var tempCanvas;var contextTemp;var container = canvas.parentNode;tempCanvas = document.createElement(canvas);!if (!tempCan...
ペイントツールfunction changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool ...
ペイントツールfunction changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool ...
ペイントツールfunction changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool ...
ペイントツールfunction changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool ...
ペイントツールfunction changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool ...
ペイントツールfunction changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool ...
ペイントツールfunction changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool ...
ペイントツールfunction changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool ...
ペイントツールfunction changeDrawTool(drawTool) {! var obj = document.getElementById(dtool);! obj.value = drawTool;! drawingTool ...
ペイントツールライン色intColor:=Select RGB color (intColor)$hexColor:=UTIL_IntToHex (intColor)WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_C...
ペイントツールライン幅function changeStrokeWidth(lWidth) {! var tempCanvas = document.getElementById(myCanvasTemp);! var tempContext ...
ペイントツール書き出しfunction getData() {! var canvas = document.getElementById(myCanvas);! var strData = canvas.toDataURL(image/png...
ペイントツール読み込みfunction loadImage(imageSource) {var canvas = document.getElementById(myCanvas);var context = canvas.getContext...
ペイントツールリンク
ペイントツールリンクhttp://muro.deviantart.comhttp://www.mrdoob.com/projects/harmony/http://muro.deviantart.com
ペイントツール
Upcoming SlideShare
Loading in …5
×

Paint Tool 2013-05-14

521
-1

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
521
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
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. ペイントツール
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×