「分鏡表.php」修訂間的差異
跳至導覽
跳至搜尋
行 2: | 行 2: | ||
==theme.php== | ==theme.php== | ||
有一部分theme.php也需要更改,才能讓 分鏡表.php正常顯示,詳細修改如下 | 有一部分theme.php也需要更改,才能讓 分鏡表.php正常顯示,詳細修改如下 | ||
− | *theme.php第198行: | + | *<b>theme.php第198行:</b> |
*這邊是讓網址URL中,若含有「分鏡表」,就出現分鏡表核取方塊 | *這邊是讓網址URL中,若含有「分鏡表」,就出現分鏡表核取方塊 | ||
<pre>if(strstr($_SERVER['SCRIPT_NAME'],'分鏡表')){$html1.="<span style='font-size:smaller;color:#000'><input type='checkbox' id='story'/>分鏡表 </span>\n";}</pre> | <pre>if(strstr($_SERVER['SCRIPT_NAME'],'分鏡表')){$html1.="<span style='font-size:smaller;color:#000'><input type='checkbox' id='story'/>分鏡表 </span>\n";}</pre> | ||
− | *theme.php第214-218行: | + | *<b>theme.php第214-218行:</b> |
*這邊是讓網址URL中,若含有「分鏡表」,就出現storyContent部分,裡面取出分鏡表.php的產出 | *這邊是讓網址URL中,若含有「分鏡表」,就出現storyContent部分,裡面取出分鏡表.php的產出 | ||
<pre> | <pre> | ||
行 16: | 行 16: | ||
</pre> | </pre> | ||
− | *theme.php第239-250行: | + | *<b>theme.php第239-250行:</b> |
*這邊是讓寫成,若是上述核取方塊被打勾,就隱藏content,顯示storyContent。反之,若是沒有被打勾,就顯示content,隱藏storyContent。 | *這邊是讓寫成,若是上述核取方塊被打勾,就隱藏content,顯示storyContent。反之,若是沒有被打勾,就顯示content,隱藏storyContent。 | ||
<pre> | <pre> | ||
行 33: | 行 33: | ||
</pre> | </pre> | ||
+ | ==分鏡表.php== | ||
+ | *<b>第2-3行很重要,要寫存放圖片的資料夾與分鏡表文字檔:</b> | ||
+ | **$folder = '.'; // 圖片存放的資料夾 | ||
+ | **$storyboard_file = './分鏡圖.txt'; // 分鏡表的文字檔 | ||
+ | *<b>第5-61行為格式設定。</b> | ||
+ | *<b>第64-78行是讀取分鏡表文字檔內容</b> | ||
+ | $storyboard_data = []; //初始化 $storyboard_data 陣列,用來存儲解析後的分鏡表數據。 | ||
+ | if (file_exists($storyboard_file)) {//檢查 $storyboard_file 是否存在,防止文件缺失時產生錯誤。 | ||
+ | : $lines = file($storyboard_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); | ||
+ | ://讀取文件內容,使用 file() 來讀取文件的每一行。FILE_IGNORE_NEW_LINES:移除每行的換行符 (\n)。FILE_SKIP_EMPTY_LINES:跳過空行,避免無效數據 | ||
+ | : foreach ($lines as $line) {//瀏覽諸$lines 陣列,逐行解析數據。 | ||
+ | :: list($id, $filename, $description, $hint, $timestamp, $subtitle) = explode('|', $line); | ||
+ | :://使用 explode('|', $line) 解析一行數據,以 | 為分隔符。解析出的數據按照順序存入對應的變數: | ||
+ | :: $storyboard_data[] = [//將解析後的數據存入 $storyboard_data 陣列:id 轉換為整數(確保排序正確)。其他字段用 trim() 去除首尾空白,避免數據問題。 | ||
+ | ::: 'id' => (int)$id, | ||
+ | ::: 'filename' => trim($filename), | ||
+ | ::: 'description' => trim($description), | ||
+ | ::: 'hint' => trim($hint), | ||
+ | ::: 'timestamp' => trim($timestamp), | ||
+ | ::: 'subtitle' => trim($subtitle) | ||
+ | :: ]; | ||
+ | : } | ||
+ | } | ||
+ | *<b>第80-83行是按 ID 排序</b> | ||
+ | usort($storyboard_data, function($a, $b) {//使用 usort() 以 id 升序排序,確保顯示順序與分鏡 ID 一致。 | ||
+ | : return $a['id'] - $b['id']; | ||
+ | }); | ||
+ | *<b>第86-98行是顯示圖片</b> | ||
+ | foreach ($storyboard_data as $storyboard) {//瀏覽排序後的 $storyboard_data 陣列。 | ||
+ | : $file_path = $folder . '/' . $storyboard['filename'];//拼接完整的圖片路徑,$folder 是圖片存放的資料夾。 | ||
+ | : if (file_exists($file_path)) { | ||
+ | :: $html .= "<nowiki><div class='storyboard-item' data-filename='{$storyboard['filename']}'></nowiki> | ||
+ | ::: <nowiki><img src='$file_path' alt='{$storyboard['filename']}' data-filename='{$storyboard['filename']}'></nowiki> | ||
+ | ::: <nowiki><div class='description'><span style='color:brown;font-size:larger'>{$storyboard['id']}. </span>描述:{$storyboard['description']}</div></nowiki> | ||
+ | ::: <nowiki><div class='hint'>提示:{$storyboard['hint']}</div></nowiki> | ||
+ | ::: <nowiki><div class='timestamp'>時間:{$storyboard['timestamp']}</div></nowiki> | ||
+ | ::: <nowiki><div class='hint'>字幕:{$storyboard['subtitle']}</div></nowiki> | ||
+ | :: <nowiki></div></nowiki>"; | ||
+ | : } | ||
+ | } | ||
+ | *<b>第103-109行為設定右鍵選單與上傳區。</b> | ||
+ | *<b>第111-163行為java script程式。</b> | ||
+ | **分別有監聽右鍵事件(按圖片右鍵,在相對應位置出現選單) | ||
+ | **點選更換圖片選單(如果按了上述的選單內容,做出相對應的反應,之後隱藏選單) | ||
+ | **監聽圖片選擇事件(呼叫'分鏡上傳.php',上傳圖片後,強制換成新圖片) | ||
+ | **點擊畫面隱藏選單(若沒有上傳新圖,可以按畫面其他位置隱藏選單 | ||
+ | ==分鏡上傳.php== | ||
+ | *<b>第2-3行,寫存放新圖與舊圖的資料夾</b> | ||
+ | *<b>第6-8行,獲取檔名與設定儲存路徑、允許附檔名</b> | ||
+ | *<b>第10-15行,附檔名檢查</b> | ||
+ | *<b>第17-23行,確保新舊圖資料夾存在</b> | ||
+ | *<b>第25-31行,移動舊圖到備份資料夾</b> | ||
+ | *<b>第2-3行,寫存放新圖與舊圖的資料夾:</b> | ||
+ | *<b>第33-39行,儲存新圖或報錯</b> | ||
於 2025年2月19日 (三) 15:20 的修訂
theme.php
有一部分theme.php也需要更改,才能讓 分鏡表.php正常顯示,詳細修改如下
- theme.php第198行:
- 這邊是讓網址URL中,若含有「分鏡表」,就出現分鏡表核取方塊
if(strstr($_SERVER['SCRIPT_NAME'],'分鏡表')){$html1.="<span style='font-size:smaller;color:#000'><input type='checkbox' id='story'/>分鏡表 </span>\n";}
- theme.php第214-218行:
- 這邊是讓網址URL中,若含有「分鏡表」,就出現storyContent部分,裡面取出分鏡表.php的產出
if(strstr($_SERVER['SCRIPT_NAME'],'分鏡表')){$html1.="<div id='storyContent' style='display:none;'> ";<br/> ob_start(); // 開啟輸出緩衝<br/> include('/volume1/web/uploadFiles/分鏡表/分鏡圖.php') ;<br/> $html1 .= ob_get_clean(); // 取得 include 產生的輸出內容<br/> $html1.="</div>";}
- theme.php第239-250行:
- 這邊是讓寫成,若是上述核取方塊被打勾,就隱藏content,顯示storyContent。反之,若是沒有被打勾,就顯示content,隱藏storyContent。
document.getElementById('story').addEventListener('change', function() { let storyContent = document.getElementById('storyContent'); let content = document.getElementById('content'); if (this.checked) { storyContent.style.display = 'block'; content.style.display = 'none'; } else { storyContent.style.display = 'none'; content.style.display = 'block'; } });
分鏡表.php
- 第2-3行很重要,要寫存放圖片的資料夾與分鏡表文字檔:
- $folder = '.'; // 圖片存放的資料夾
- $storyboard_file = './分鏡圖.txt'; // 分鏡表的文字檔
- 第5-61行為格式設定。
- 第64-78行是讀取分鏡表文字檔內容
$storyboard_data = []; //初始化 $storyboard_data 陣列,用來存儲解析後的分鏡表數據。 if (file_exists($storyboard_file)) {//檢查 $storyboard_file 是否存在,防止文件缺失時產生錯誤。
- $lines = file($storyboard_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
- //讀取文件內容,使用 file() 來讀取文件的每一行。FILE_IGNORE_NEW_LINES:移除每行的換行符 (\n)。FILE_SKIP_EMPTY_LINES:跳過空行,避免無效數據
- foreach ($lines as $line) {//瀏覽諸$lines 陣列,逐行解析數據。
- list($id, $filename, $description, $hint, $timestamp, $subtitle) = explode('|', $line);
- //使用 explode('|', $line) 解析一行數據,以 | 為分隔符。解析出的數據按照順序存入對應的變數:
- $storyboard_data[] = [//將解析後的數據存入 $storyboard_data 陣列:id 轉換為整數(確保排序正確)。其他字段用 trim() 去除首尾空白,避免數據問題。
- 'id' => (int)$id,
- 'filename' => trim($filename),
- 'description' => trim($description),
- 'hint' => trim($hint),
- 'timestamp' => trim($timestamp),
- 'subtitle' => trim($subtitle)
- ];
- }
}
- 第80-83行是按 ID 排序
usort($storyboard_data, function($a, $b) {//使用 usort() 以 id 升序排序,確保顯示順序與分鏡 ID 一致。
- return $a['id'] - $b['id'];
});
- 第86-98行是顯示圖片
foreach ($storyboard_data as $storyboard) {//瀏覽排序後的 $storyboard_data 陣列。
- $file_path = $folder . '/' . $storyboard['filename'];//拼接完整的圖片路徑,$folder 是圖片存放的資料夾。
- if (file_exists($file_path)) {
- $html .= "<div class='storyboard-item' data-filename='{$storyboard['filename']}'>
- <img src='$file_path' alt='{$storyboard['filename']}' data-filename='{$storyboard['filename']}'>
- <div class='description'><span style='color:brown;font-size:larger'>{$storyboard['id']}. </span>描述:{$storyboard['description']}</div>
- <div class='hint'>提示:{$storyboard['hint']}</div>
- <div class='timestamp'>時間:{$storyboard['timestamp']}</div>
- <div class='hint'>字幕:{$storyboard['subtitle']}</div>
- </div>";
- $html .= "<div class='storyboard-item' data-filename='{$storyboard['filename']}'>
- }
}
- 第103-109行為設定右鍵選單與上傳區。
- 第111-163行為java script程式。
- 分別有監聽右鍵事件(按圖片右鍵,在相對應位置出現選單)
- 點選更換圖片選單(如果按了上述的選單內容,做出相對應的反應,之後隱藏選單)
- 監聽圖片選擇事件(呼叫'分鏡上傳.php',上傳圖片後,強制換成新圖片)
- 點擊畫面隱藏選單(若沒有上傳新圖,可以按畫面其他位置隱藏選單
分鏡上傳.php
- 第2-3行,寫存放新圖與舊圖的資料夾
- 第6-8行,獲取檔名與設定儲存路徑、允許附檔名
- 第10-15行,附檔名檢查
- 第17-23行,確保新舊圖資料夾存在
- 第25-31行,移動舊圖到備份資料夾
- 第2-3行,寫存放新圖與舊圖的資料夾:
- 第33-39行,儲存新圖或報錯
待修改與測式
- 補縮圖 work
- 建子資料夾,功能會繼承
- 分鏡圖.txt 按右鍵編輯
- http 下載 本地端
- 本地編輯
- 存檔時 http 上傳