2024年4月30日 星期二

解決illustrator 使用轉存為螢幕適用的存圖時,存完的圖會有1px誤差的問題

圖形匯出時會帶有額外的像素,這是因為畫板(工作區域)的位置包含小數點。 要解決此問題,轉到“視窗”->“屬性”。 選擇畫板工具 (Shift+O)。 只需確保畫板的 X 和 Y 以 0 結尾。 再執行「轉存為螢幕適用」就不會有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雲端硬碟的資料夾嵌入網頁內

如果單純只是要用iframe把google的雲端硬碟嵌入網頁內,可以使用以下語法
語法中的{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

在chorme上 html內的input加上autocomplete=off並不能禁止該欄位不自動輸入, google後得到可解決的方案如下: 只需將自動完成設置為獨特的即可。如:"autocomplete="new-user-email"
<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日 星期五

【Mac】解決MacBook Pro TouchBar狂閃爍 MacBook TouchBar Flicker Fix

做下面的設定意外地解決了MacBook Pro 觸控列在待機或睡眠時狂閃的問題

1.開啟「系統偏好設定」,選擇「鍵盤」

2.依照下面紅框處設定即可:















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日 星期三

【Unity】interface接口的概念

 interface接口,主要是可以在不同腳本中共用相同的類,只要多個不同腳本接上同樣的接口

那麼各個腳本中符合該接口的函式就都可以被外部使用。

下面這部影片8:30秒開始的說明可以比較清楚了解。

2023年3月21日 星期二

【Unity】IEnumerator筆記

 在Unity中,IEnumerator是一個接口,它可以用來實現一種特殊的方法,稱為協程(Coroutine)。

協程是一種能夠讓程式在執行到特定點時暫停,並且在之後的某個時間點繼續執行的方法。它可以讓開發者實現一些需要等待或分段執行的功能,比如動畫效果、延遲操作、遊戲流程控制等等。

IEnumerator接口是協程的核心,它提供了一些必要的方法和屬性,使得協程的實現變得容易。在使用協程時,開發者可以創建一個IEnumerator對象,並且在其中編寫協程所需要執行的代碼。然後,開發者可以使用Unity的協程系統來啟動這個IEnumerator對象,並且在需要的時間點暫停和繼續執行。

IEnumerator接口是Unity協程的核心,它可以讓開發者輕鬆地實現一些需要等待或分段執行的功能。

2023年3月7日 星期二

【Html初學手記】Head區塊中最常見的屬性介紹

  1. title: 這是 head 區塊中最重要的屬性之一,它定義了網頁的標題,同時也是瀏覽器標籤中顯示的文字。
  2. meta: 這是一個可以包含各種屬性的標籤,其中包括:
    • charset: 用於定義網頁所使用的字符集。
    • description: 用於描述網頁的內容,通常在搜索引擎中顯示網頁的描述文字。
    • keywords: 用於定義網頁的關鍵詞,以便在搜索引擎中進行索引和搜尋。
    • viewport: 用於設置網頁在移動設備上的顯示方式。
  3. link: 這個標籤用於定義外部資源,例如 CSS 文件和 JavaScript 文件,可以指定其檔案路徑、MIME 類型和關係類型。
  4. style: 這個標籤可以用於在 head 區塊中定義 CSS 樣式,通常用於定義網頁的全局樣式。
  5. 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組件的搭配實現的。以下是幾種常見的碰撞判斷方式:

  1. OnCollisionEnter2D(Collision2D collision):當一個物體碰撞到另一個物體時,Unity會調用此方法。這個方法的參數包含碰撞信息,例如碰撞點,碰撞的法線等。

  2. OnTriggerEnter2D(Collider2D other):當一個物體進入另一個物體的碰撞區域時,Unity會調用此方法。這個方法的參數包含進入碰撞區域的物體的Collider組件。

  3. OnTriggerExit2D(Collider2D other):當一個物體離開另一個物體的碰撞區域時,Unity會調用此方法。這個方法的參數包含離開碰撞區域的物體的Collider組件。

  4. OnCollisionStay2D(Collision2D collision):當兩個物體正在碰撞且仍在接觸時,Unity會每幀調用此方法。這個方法的參數包含碰撞信息,例如碰撞點,碰撞的法線等。

  5. OnTriggerStay2D(Collider2D other):當一個物體進入另一個物體的碰撞區域且仍在接觸時,Unity會每幀調用此方法。這個方法的參數包含進入碰撞區域的物體的Collider組件。

在使用這些方法時,需要注意以下幾點:

  1. 這些方法必須在MonoBehaviour的派生類中實現。

  2. 每個Collider必須設置為觸發器(IsTrigger)或非觸發器,這決定了碰撞的行為。

  3. 如果物體需要進行物理運動,需要將物體的Rigidbody設置為可運動的(Rigidbody Type)。

  4. 碰撞判斷通常是在物體的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

 網頁版面為


<div class="videoWrapper">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/影片ID" title="YouTube video player" width="560"></iframe>
</div>

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是否成功

要檢查 mysqli_query() 插入是否成功,可以使用 mysqli_affected_rows() 函數。 此函數返回受查詢影響的行數。 如果插入成功,受影響的行數應該大於 0。如下:
$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:隱藏特定副檔名的檔案