繼續調整畫面跟功能 因初始連線撈取資料會有點延遲 再加上撈完資料繪製也會需要一點時間 所以加上一個提示的訊息 https://imgur.com/klto6b8 https://imgur.com/rmLTouy 說是延遲，但也就是3~5秒左右的時間 是沒有太大影響，不過加個訊息會好一點 調整簡易操作說明方塊 https://imgur.com/sEGOd2i 原本卡在最下面不好看也佔一個空間 改為類似訊息方塊，顯示在繪製區域上方，可以關閉 格線的標示數字之前文字設定有問題，顯示太小，一起調整 https://imgur.com/eDLwl0E https://imgur.com/F9pPsgm 介面配色些微調整 然後左方工具，筆刷方塊依據全形或半形調整顯示大小 而全形或半形的判斷，跟AAC一樣，使用Unicode官方的文件為判斷的邏輯 https://www.unicode.org/reports/tr11/tr11-43.html 工具區新增一個參考圖 因為在測試畫兔子的時候，發現有點不好畫 所以想做個匯入圖片 這個匯入是使用各個browser的temp檔存放空間 目前還沒做完這部分，也還沒想好要怎麼調整圖的位置、大小等 操作的部分 測試補一個touch點的移動版面判斷 平板或手機的觸控單指是可以滑動畫面 也只能平移就是了，其他部分後續有時間再說 ※ 引述《poewar (☺☻)》之銘言： : 繼續製作ansi共繪 : 當前結果 : https://imgur.com/KtiYd8M : 測試亂數繪製256色前景跟背景的符號 : 調整介面，切分成三大區塊 : 左方的顏色、工具跟控制選項 : 目前工具只有畫筆跟橡皮擦 : 區塊留言還未開始製作，預計構想是可以方框框選一個範圍然後留訊息 : 訊息會顯示在繪製區畫面上，可以切換是否顯示 : 不知道實際如何還是要等開始弄了才行 : 右方留言區塊簡單實作出來 : 顯示訊息列表跟輸入的部分 : 剩下讓繪製區填滿中間，下方加一個訊息說明 : 符號列表顯示 : https://imgur.com/0us3Dfu : 當前是簡單滑鼠移到右方的按鈕hover後顯示 : 列表的內容就使用AAC當中使用的資料 : 結構有稍微調整跟清除不用的資訊來減低檔案大小 : 放在右邊跳出是想說可以在選擇的時候，看到左方功能區畫筆實際顯示的樣子 : 因為讓繪製區改為填滿中間區域 : 測試不同解析度的狀況 : https://imgur.com/dCmab7D : https://imgur.com/N4iGNWp : 雖然當前可以在平板上顯示，但是因為我目前的操作邏輯是用滑鼠判斷 : 所以觸控點按鈕什麼的沒有問題，但是不能移動圖面跟繪製 : 是否加入這部分的邏輯之後再看看 : ※ 引述《poewar (☺☻)》之銘言： : : 最近沒在更新AAC軟體XD : : 主要原因是，前陣子呢，看到了像素共繪覺得很有趣 : : 於是就在思考是不是也來做個ANSI共繪 : : 想了個一陣子，還是決定開始試試看囉 : : 先上目前的成果 : : https://imgur.com/u11hzmY : : 目前初步完成畫面繪製、資料傳輸、顏色筆刷、符號選擇 : : 畢竟是共繪，所以目前還缺個留言聊天的區塊 : : 這部份算比較好處理了，預計放在右半邊區域 : : 開啟輔助格線顯示 : : https://imgur.com/9B09L3A : : 也可以縮放 : : https://imgur.com/8s44Zm7 : : 目前測試開 500個半型字 * 250行 的繪圖範圍 : : 以一個半型字大小 10*20 pixels 來算，就是 5000*5000 pixels的圖 : : 若是建置一整張圖來說可能會有點效能問題 : : 所以拆成 500*500 共100張小圖結合，就可以減少繪製超大張圖片的一些問題 : : 當前拖曳或快速縮放畫面都還是可以維持60 fps(因我螢幕只有60Hz) : : 所以應該是沒什麼大問題了 : : 接著會遇到的就是資料傳輸的問題了 : : 初期資料已經儘量減少不必要的東西，目前沒有符號的部分也不傳 : : 就算整個畫面都有符號，全部資料量也可以在10mb左右 : : 使用瀏覽器的IndexedDB保存資料，並記錄最後一個符號的時間 : : 下次在開啟時，則可以使用此時間戳記取得後續有更新的區塊 : : 減少傳送的資料量，也避免每次都整個畫面資料重傳 : : 後端資料則是存在DB裡面 : : 測試存了9萬多筆繪製紀錄約15mb，應該不用擔心吃太多 : : 滿有趣的，其餘的部分後續再接著弄囉 -- ◤ ◤ ◤ ◤ANSI繪圖軟體 ◤ ◤ ANSI Art Creator ◤ ◤ ◤ https://aac.iverv.com ◤ ◤ ◤ ◤ ◣ --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 220.133.5.88 (臺灣) ※ 文章網址: https://webptt.com/m.aspx?n=bbs/asciiart/M.1740332855.A.100.html