1. 開啟 vscode, 搜尋並安裝好插件 debugger for Chrome
2. 開啟專案的目錄
3. 設定好執行 debug 的環境, 準備讓 chrome 開啟 index.html 檔案, 只要點選 vscode 的選單 Debug -> Open Configurations, 在開啟 launch.json 後, 填入以下文字, 主要是填入讓 chrome 開啟 url 檔案所在位置, 並設定好工作的根目錄:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "執行 Chrome 開啟 index.html 檔",
"url": "file:///${workspaceFolder}/index.html",
"webRoot": "${workspaceFolder}"
}
]
}
4. 設定好將 dart2js 的環境, 準備將 dart 語法轉換為 javascript, 只要點選 vscode 的選單 Terminal -> Configure Tasks, 在開啟 tasks.json 後, 填入以下文字, 主要是將 dart2js 執行檔的絕對路徑填入 "command" 所指示的位置, 並設定好一些必要參數 args:
{
"version": "2.0.0",
"tasks": [
{
"label": "dart2js",
"type": "shell",
"command": "/home/mint/Downloads/flutter/bin/cache/dart-sdk/bin/dart2js",
"args": [
"${file}",
"-o",
"${fileBasenameNoExtension}.js"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
5. 撰寫 index.html 要讓 Chrome開啟 url 後, 自動執行經 dart2js 轉換後的 main.js:
<html><head><meta charset='utf-8'></head><body>
<script type='application/javascript' src='main.js'></script>
</body></html>
6. 用 dart 語言在 html 的 canvas 上繪製 sin(2πft) 函數圖, 範例主程式 main.dart:
// main.dart
class CanvasSin {
final DivElement div = document.createElement('div');
final CanvasElement canvas = document.createElement('canvas');
final int width, height;
get fullYscale => height~/2;
CanvasRenderingContext2D get ctx => canvas.getContext("2d");
void penline(int x1, int y1, int x2, int y2) => ctx .. strokeStyle="red" ..
beginPath( ) .. moveTo(x1, y1) .. lineTo(x2, y2) .. stroke( );
void get penOrigin => ctx .. save( ) .. translate(0, fullYscale) .. scale(1, -1) ..
beginPath( ) .. moveTo(0, 0);
void get penFinish => ctx .. strokeStyle="green" .. stroke( ) .. restore( );
void penTo(int x, double y) => ctx.lineTo(x, y);
CanvasSin(this.width, this.height) {
document.body.append(div);
div.append(canvas);
canvas.style.border = "1px solid";//外框 1 點
canvas.width = width;
canvas.height = height;
penline(0, 0, 0, height);// y-axis
penline(0, fullYscale, width, fullYscale);// x-axis
int freq = 2;
double f(int t) => fullYscale * sin(2.0*3.14159*freq*t/width);// sin(2πft)
penOrigin;
for(int t = 0; t < width; t ++) penTo(t, f(t));
penFinish;
}
}
void main( ) => CanvasSin(800, 600);
7.目前 dart2js 僅能編譯整個內含 main( ) 主程序的 dart 原始碼, 無法針對個別單一程式碼去編譯, 經上述步驟 4 設定好後, 要將目前用 dart 語言編輯的主程式轉換為相對應的 javascript 程式碼, 只要按下快捷鍵 ctrl-shift-B, 或是用選單 Terminal -> Run Task 選取 dart2js 直接編譯
8. 經上述步驟 1~6 後, 按下快捷鍵 F5, 或是用選單 Debug -> Start Debugging 就能讓 Chrome 直接開啟 url 執行所轉換後的 javascript
沒有留言:
張貼留言