2024年4月30日 星期二
解決illustrator 使用轉存為螢幕適用的存圖時,存完的圖會有1px誤差的問題
2023年12月3日 星期日
用CSS讓頁面的footer即使內容高度不夠的情況下也可以永遠保持在下方
用CSS在Body上加上下面的屬性
body{
display: grid;
grid-template-rows: auto 1fr auto; /* 自動大小的header、撐滿內容的主體、自動大小的footer */
min-height: 100vh; /* 當內容高度不足時,也可以撐開整個頁面的高度 */
margin: 0;
}
2023年10月28日 星期六
使用embeddedfolderview把google drive雲端硬碟的資料夾嵌入網頁內
語法中的{GoogleFolderShareId}指的就是分享google drive取得的網址內的參數
網址後方接上#grid那麼網頁上瀏覽時就會是以預覽小圖的方式呈現,如果把#grid拿掉那麼就會是以列表的方式呈現
<iframe src="https://drive.google.com/embeddedfolderview?id={GoogleFolderShareId}#grid" style="min-height:100vh;" height="100%" width="100%" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>
另外一個可以使用object,好處是當假設目錄是公開的,則任何登入 Google 的人都會看到該目錄的資料夾視圖。否則,就會看到替代的文字鏈接「點擊此連結查看目錄內容」:
<object data="https://drive.google.com/embeddedfolderview?id={GoogleFolderShareId}#grid" width="100%" style="height:100vh" >點擊<a href= "https://drive.google.com/drive/folders/{GoogleFolderShareId}">此連結</a>查看目錄內容</object>
2023年9月18日 星期一
再Chrome上關閉單獨input欄位的autocomplete
<input class="textInput" id="useremail" name="useremail" autocomplete="new-user-email" type="text"/>google chrome team的回覆如下:
autocomplete=off 禁用自動完成,但保持自動填充啟用。
autocomplete=garbage 禁用自動填充,但保持自動完成啟用。
自動填充嘗試根據您在 chrome://settings/autofill 中保存的數據填寫表單。
自動完成嘗試根據先前在字段中輸入的值來填充字段。 參考此篇:https://bugs.chromium.org/p/chromium/issues/detail?id=1434624
2023年5月8日 星期一
搞懂css flex-grow, flex-shrink, flex-basis
要控制flexbox內的子物件的寬度最好的方法就是善用下面這三個屬性:
flex-grow: 0; /* 不增長 - 初始值:0 */ flex-shrink: 0; /* 不收縮 - 初始值:1 */ flex-basis: 25em; /* 寬度/高度 - 初始值:自動 */
//上面三個屬性可簡寫為 flex:0 0 25em;如下範例
.flexbox .child{
flex:0 0 25em;
}
php 以方便閱讀的方式 print_r 出陣列的值
在print_r前後加上
就可以用分段的方式列出array
echo "<pre>";
print_r($cntArr);
echo "</pre>";
2023年4月21日 星期五
2023年4月1日 星期六
【Unity】Destroy()和 DestroyImmediate()有什麼不同?
Destroy();會在接收到指令後的當前幀結束後才將GameObject物件刪除(設置為Null)
而DestroyImmediate();則是會在接收到指令後,立刻就刪除掉GameObject物件,不會等到當前幀結束後才進行。
然而根據官方文件說明,DestroyImmediate()這個函數應該只在編寫編輯器代碼時使用,因為延遲銷毀永遠不會在編輯模式下被調用。在遊戲代碼中,應該改用Object.Destroy。銷毀總是被延遲(但在同一幀內執行)。小心使用此功能,因為它會永久破壞資產!另要注意,永遠不要遍歷數組並銷毀正在遍歷的元素。這將導致嚴重的問題(不僅僅是在 Unity 中,而是在一般的語法編輯中都不要這樣做)。
https://docs.unity3d.com/ScriptReference/Object.DestroyImmediate.html
2023年3月28日 星期二
【Unity】TextMesh Pro跟Text有什麼不同?
Unity中的Text是一個基本的UI元素,可以用來顯示簡單的文字內容。而TextMesh Pro則是一個高級的文字顯示插件,它提供了比Text更豐富的文字顯示功能。
以下是TextMesh Pro相對於Unity的Text的一些主要不同之處:
- 字體質量:TextMesh Pro支持更高質量的字體,包括自定義字體和向量字體。相比之下,Unity的Text只支持TrueType字體。
- 文字排版:TextMesh Pro提供了更強大的文字排版功能,包括文字對齊、自動換行、字符間距和行間距等。
- 文字效果:TextMesh Pro支持許多文本效果,如陰影、輪廓、梯度和傾斜等。這些效果可以幫助文本在遊戲中更加鮮明突出。
- 顯示效率:由於 TextMesh Pro 的優化,其在顯示大量文本時效率更高,能够更好的支援場景中大量文本的應用。
TextMesh Pro是一個更高級、更強大的文字顯示插件,它能夠讓遊戲中的文字更加美觀和功能更加強大。
2023年3月27日 星期一
【Unity】awake()跟start()有什麼不同?
在Unity中,Awake()和Start()都是MonoBehaviour生命週期中的方法,它們在物件被建立時執行。但是它們的執行時間有所不同,具體差異如下:
Awake()方法是在物件被建立時就會執行,而且只會執行一次,通常用於進行初始化設置,例如取得對其他物件的參考、設置初始變數等。Awake()方法在腳本啟用前被調用,可以用來設置一些不依賴其他物件的變量和屬性。
Start()方法在Awake()方法後執行,並在物件啟用時被調用,通常用於初始化腳本和設置初始值,例如設置相機的視角和位置、設置遊戲中的初始變量等。Start()方法是在第一次Update之前被調用,所以它是用於設置一些需要在遊戲中動態調整的變量和屬性。
Awake()方法用於設置一些靜態變量和初始化遊戲物件,Start()方法用於設置動態變量和初始化遊戲邏輯。
2023年3月22日 星期三
2023年3月21日 星期二
【Unity】IEnumerator筆記
在Unity中,IEnumerator是一個接口,它可以用來實現一種特殊的方法,稱為協程(Coroutine)。
協程是一種能夠讓程式在執行到特定點時暫停,並且在之後的某個時間點繼續執行的方法。它可以讓開發者實現一些需要等待或分段執行的功能,比如動畫效果、延遲操作、遊戲流程控制等等。
IEnumerator接口是協程的核心,它提供了一些必要的方法和屬性,使得協程的實現變得容易。在使用協程時,開發者可以創建一個IEnumerator對象,並且在其中編寫協程所需要執行的代碼。然後,開發者可以使用Unity的協程系統來啟動這個IEnumerator對象,並且在需要的時間點暫停和繼續執行。
IEnumerator接口是Unity協程的核心,它可以讓開發者輕鬆地實現一些需要等待或分段執行的功能。
2023年3月7日 星期二
【Html初學手記】Head區塊中最常見的屬性介紹
- title: 這是 head 區塊中最重要的屬性之一,它定義了網頁的標題,同時也是瀏覽器標籤中顯示的文字。
- meta: 這是一個可以包含各種屬性的標籤,其中包括:
- charset: 用於定義網頁所使用的字符集。
- description: 用於描述網頁的內容,通常在搜索引擎中顯示網頁的描述文字。
- keywords: 用於定義網頁的關鍵詞,以便在搜索引擎中進行索引和搜尋。
- viewport: 用於設置網頁在移動設備上的顯示方式。
- link: 這個標籤用於定義外部資源,例如 CSS 文件和 JavaScript 文件,可以指定其檔案路徑、MIME 類型和關係類型。
- style: 這個標籤可以用於在 head 區塊中定義 CSS 樣式,通常用於定義網頁的全局樣式。
- script: 這個標籤用於定義 JavaScript 代碼,可以在網頁中添加交互功能和動態效果。
2023年2月22日 星期三
【Unity】Update和FixedUpdate有什麼不同?
Update和FixedUpdate是Unity3D中的兩個常見的函數,不僅適用於2D,也適用於3D開發。這兩個函數是MonoBehaviour類的兩個方法,用於更新遊戲物體的狀態,實現遊戲物體的運動、動畫、碰撞檢測等功能。
Update函數在每一個畫面更新(幀)時都被調用,通常用於處理與時間有關的遊戲邏輯,例如遊戲物體的移動、旋轉、動畫播放、鍵盤輸入檢測等。
FixedUpdate函數在固定時間間隔(通常是每0.02秒)被調用,用於處理與物理引擎有關的邏輯,例如碰撞檢測、剛體運動、物體受力等。由於FixedUpdate的調用頻率比Update低,因此對於遊戲物體的物理模擬來說更加穩定,避免了物理模擬的抖動和錯誤。
總之,Update和FixedUpdate是Unity3D開發中非常重要的函數,無論是2D還是3D開發,都需要掌握它們的使用方法。
在Unity中,Update和FixedUpdate都是用來更新場景中物體的函數,但它們的執行時間和更新方式有所不同。
Update函數會在每一個遊戲畫面渲染時執行一次,它的更新頻率取決於當前的幀率,因此會根據電腦性能而有所不同。由於Update函數的執行時間不固定,因此它比FixedUpdate函數更容易受到性能波動的影響。通常用來更新遊戲物體的位置和旋轉等操作,以及處理玩家輸入和響應遊戲事件等。
FixedUpdate函數則是固定時間間隔執行的,每個固定的時間間隔(通常為0.02秒)執行一次,這意味著它的更新頻率是固定的,不受幀率的影響。由於FixedUpdate函數的執行時間是固定的,因此它比Update函數更穩定,適合用於處理物理引擎的運算,例如剛體運動計算等。
總體來說,如果需要更新物體的位置和旋轉等操作,或者需要處理玩家輸入和響應遊戲事件等,就應該使用Update函數;如果需要處理物理引擎的運算,就應該使用FixedUpdate函數。
【Unity】Unity 2D上的碰撞要怎麼寫?有哪幾種判斷方式?
在Unity 2D中,碰撞通常是通過Collider和Rigidbody組件的搭配實現的。以下是幾種常見的碰撞判斷方式:
-
OnCollisionEnter2D(Collision2D collision):當一個物體碰撞到另一個物體時,Unity會調用此方法。這個方法的參數包含碰撞信息,例如碰撞點,碰撞的法線等。
-
OnTriggerEnter2D(Collider2D other):當一個物體進入另一個物體的碰撞區域時,Unity會調用此方法。這個方法的參數包含進入碰撞區域的物體的Collider組件。
-
OnTriggerExit2D(Collider2D other):當一個物體離開另一個物體的碰撞區域時,Unity會調用此方法。這個方法的參數包含離開碰撞區域的物體的Collider組件。
-
OnCollisionStay2D(Collision2D collision):當兩個物體正在碰撞且仍在接觸時,Unity會每幀調用此方法。這個方法的參數包含碰撞信息,例如碰撞點,碰撞的法線等。
-
OnTriggerStay2D(Collider2D other):當一個物體進入另一個物體的碰撞區域且仍在接觸時,Unity會每幀調用此方法。這個方法的參數包含進入碰撞區域的物體的Collider組件。
在使用這些方法時,需要注意以下幾點:
-
這些方法必須在MonoBehaviour的派生類中實現。
-
每個Collider必須設置為觸發器(IsTrigger)或非觸發器,這決定了碰撞的行為。
-
如果物體需要進行物理運動,需要將物體的Rigidbody設置為可運動的(Rigidbody Type)。
-
碰撞判斷通常是在物體的Update方法中進行的,因此需要注意碰撞的性能問題。如果需要高效的碰撞判斷,可以使用物理引擎提供的碰撞檢測方法,如Raycast、SphereCast、CapsuleCast等。
2023年1月14日 星期六
如何禁止網頁在ios 上手指雙點的時候放大
網路上搜尋有幾個解法如下:
1.在網頁上加一段javascript 語法 *有用*
document.ondblclick = function(e) {
e.preventDefault();
}
2.加Meta如下 *實際測試沒有用*
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
3.加Css fix如下 *實際測試沒有用*
body{
touch-action: manipulation;
}
但是使用下面這段,可以禁止縮放,而且是雙點或用兩根指頭縮放都會禁止,但是因為網頁也不能往下滑動,所以如果網頁內容超出目前螢幕範圍外,就不能往下滑動瀏覽
body{
touch-action: none;
}
以上,目前還不知道為何2跟3沒作用,上面的解法1只能讓兩次點擊時不會放大,但是兩隻手指縮放還是可以
2022年12月19日 星期一
youtube 以iframe嵌入網頁符合自適應RWD
網頁版面為
CSS樣式
.videoWrapper{
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.videoWrapper iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
參考:16:9的比例為 56.25%
4:3的比例為 75%
相關:
RWD:以區塊對角線的比例來設定隨螢幕大小自動伸縮的背景圖
2022年12月7日 星期三
如何檢查 mysqli_query() insert,update是否成功
$result = mysqli_query($conn, $query);
if (mysqli_affected_rows($conn) > 0) {
// insert was successful
} else {
// insert failed
}
此方法僅適用於insert, update跟delete 的queries查詢。
對於select資料,mysqli_affected_rows() 將始終返回 0。
在這種情況下,可以使用 mysqli_num_rows() 檢查select查詢是否返回任何行。
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
// query returned one or more rows
} else {
// query returned no rows
}
2022年11月8日 星期二
讓phpmyadmin顯示並列出超過500筆以上的資料
方法1.
如果有主機phpmyadmin資料夾的寫入權限的話 可以進入該資料夾找一個config.inc.php檔案 然後找到設定限制行數到這行,改成想設定的顯示上限值,列如數值設定為1000$cfg['MaxRows'] = 1000;如果該行不存在(默認安裝中缺少該行),則轉到文檔底部並添加該行
方法2.
直接寫在sql上,在select的語法後面加上Limit值,例如要撈出0到1000筆資料:SELECT id, name, mail FROM tableName WHERE active = 1 ORDER BY id LIMIT 0,1000;
2022年6月14日 星期二
利用.htaccess來禁止網站資料夾在瀏覽器上列出檔案列表
為了防止有些虛擬主機沒有保護網站主機目錄下的檔案,導致在沒有index檔案的資料夾內,直接使用網址瀏覽會列出該資料夾下所有的檔案內容,那麼可以在網站根目錄上使用.htaccess來達成禁止瀏覽器列出檔案列表,以免資料夾內的檔案內容被看光光。
作法:在網站根目錄上新增.htaccess檔案,然後在裡面加上下面這一行:
Options -Indexes
那麼以網址直接瀏覽沒有index檔案的folder夾,就會輸出403錯誤
其他相關語法:
- Options +Indexes:列出資料夾內所有檔案
- Options -Indexes:隱藏資料夾內所有檔案(輸出403)
- IndexOptions +FancyIndexing:列出資料夾下所有檔案,檔案前面包含檔案類型的小圖示
- IndexOptions -FancyIndexing : 列出資料夾下所有檔案,但不包含檔案類型的小圖示
- IndexIgnore *.php *.html:隱藏特定副檔名的檔案
