TP Notes

2020年11月13日星期五

SVG 的 clipPath

SVG 有超強的 path 可以設定路徑，也可以用這個路徑來做一些應用，最實用的功能之一就是裁切，
而且在 SVG 的 defs 中定義的 clipPath 可以直接在 CSS 裡面用，在 MAC 的 safari 以及 iphone 上要使用 -webkit-clip-path ，但是也不完全正常，使用方式在 style 裡頭加上 ```clip-path:url(#ID);-webkit-clip-path:url(#ID);``` 即可
  
如以下範例，圖四是使用 img + clip-path 做裁切，因為在 clipPath 使用了多個 path ，在 safari 以及 iphone 上無法正常顯示，而圖六是用 svg 的 image 顯示圖片，並且使用 clip-path 裁切，在所有瀏覽器都可以正常顯示。  
  
範例如下：

```
$mmcode(r1)
```  
<div class="mmresult r1">
  
<svg viewbox="-1,-1,202,180" style="width:0;height:0">
  <defs>
  <clipPath id="a11131_cp1">
    <path id="a11131_p1" d="M0,50 a1,1,0,0,1,100,0 a1,1,0,0,1,100,0 C200,110,150,150,100,180 C50,150,0,110,0,50Z" />
  </clipPath>
  <clipPath id="a11131_cp2">
    <use xlink:href="#a11131_p1" transform="scale(0.4)"/>
    <use xlink:href="#a11131_p1" transform="translate(70,50) scale(0.65)"/>
    <use xlink:href="#a11131_p1" transform="translate(20,120) scale(0.3)"/>
  </clipPath>
  </defs>
</svg> 
<style>
.a11131_s1
{
  display:inline-block;
}
</style>
<div class="a11131_s1">圖一<br>
<svg style="width:200px;height:200px;background:#ff0">
  <use xlink:href="#a11131_p1" fill="#f00"/>
</svg>
</div>
  
<div class="a11131_s1">圖二<br>
<svg style="width:200px;height:200px;background:#ff0">
  <rect x="0" y="0" width="200" height="200" clip-path="url(#a11131_cp1)" fill="#00f">
  </rect>
</svg>
</div>

<div class="a11131_s1">圖五<br>
<svg style="width:200px;height:200px;background:#ff0">
  <rect x="0" y="0" width="200" height="200" clip-path="url(#a11131_cp2)" fill="#00f">
  </rect>
</svg>
</div>
  
<div class="a11131_s1">圖六<br>
<svg style="width:200px;height:200px;background:#ff0">
  <image href="https://yiharng.github.io/bird.jpg" x="0" y="0" width="200" height="200" preserveAspectRatio="none" clip-path="url(#a11131_cp2)" />
</svg>
</div>
  
  
</div>
<hr>
clipPath 裡頭的路徑都是 OR 運算，要做 AND 運算的話，可以在 clipPath 再加上 clip-path **(圖三)**

在這個範例中畫了一個星星，通常在繪圖時要挖空重疊的部份用的是 **fill-rule="evenodd"** ，然而在 clipPath 中無效，必須用 **clip-rule="evenodd"** 才行
  
在這邊也發現了一個 chrome 的 bug , clipPath 基本上無法做 XOR 運算，結果圖四在 chrome 卻出現了類似 XOR 的效果，在 firefox 和 safari 沒有問題
  
```
$mmcode(r2)
```
  
<div class="mmresult r2">
  
<svg id="a11132_idsvg" xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<clipPath id="a11132_cp1" clip-rule="evenodd">
  <path id="a11132_p1" d="M30,200 L100,0 L170,200 L0,70 L200,70Z" fill="#00f"></path>
  <circle cx="100" cy="100" r="20"/>
</clipPath>
<clipPath id="a11132_cp2">
  <use xlink:href="#a11132_p1"/>
  <circle cx="100" cy="100" r="60"/>
</clipPath>
<clipPath id="a11132_cp3" clip-path="url(#a11132_cp1)">
  <circle cx="100" cy="100" r="60"/>
</clipPath>
<clipPath id="a11132_cp4" clip-rule="evenodd">
  <path id="a11132_p1" d="M30,200 L100,0 L170,200 L0,70 L200,70Z" fill="#00f"></path>
  <circle cx="100" cy="100" r="60"/>
</clipPath>
</defs>  
</svg>
<div style="display:inline-block">
圖一<br>
<svg width=200 height=200>
<rect x=0 y=0 width=200 height=200 clip-path="url(#a11132_cp1)" fill="#00f"/>
</svg>
</div>
<div style="display:inline-block">
圖二<br>
<svg width=200 height=200>
<rect x=0 y=0 width=200 height=200 clip-path="url(#a11132_cp2)" fill="#00f"/>
</svg>
</div>
<div style="display:inline-block">
圖三<br>
<svg width=200 height=200>
<rect x=0 y=0 width=200 height=200 clip-path="url(#a11132_cp3)" fill="#00f"/>
</svg>
</div>  
<div style="display:inline-block">
圖四<br>
<svg width=200 height=200>
<rect x=0 y=0 width=200 height=200 clip-path="url(#a11132_cp4)" fill="#00f"/>
</svg>
</div>  
</div>

2020年11月12日星期四

SVG 的 defs 以及漸層填色

SVG 的 defs 可以用來定義各種圖形或路徑，在其它 svg 中只要用 
```<use xlink:href="#ID"/>``` 即可引用，範例如下

在這個範例中，第一個 svg 是隱藏的，純脆只定義幾個矩形，下面兩個 svg 引用後繪製圖形，在引用時可以設定裡頭的參數，而這裡設定的座標參數是相對座標

defs 的位置似忽沒有限制，範例中的 a11121_rect5 在前面使用，卻在後面才定義，結果一樣可以正常顯示

```
$mmcode(r1)
```

$("#a11121_b2").on("click",()=>
  {
    $("#a11121_g1").append('<rect id="a11121_rect3" width="50" height="50" x="100" y="80" fill="#f0f"/>');

$("#a11121_g1").html($("#a11121_g1").html());
/* 光 append 一段 html 沒有作用，整個 html 置換才有作用，所以要加這一行 */
  });

})();

</script>
</div>
<hr>

# defs 的應用-漸層填色

defs 的第一個應用是漸層填色，和 CSS 的漸層填色很像，一個線性漸層和一個圓形漸層

基本範例 :

```
$mmcode(r2)
```

<button id="a11122_b1" style="font-size:1em;">取消填色</button>
<script>
$(function()
{
  $("#a11122_b1").on("click",()=>
  {
    $("#a11122_rect2").attr("fill","");
  });
});
</script>

</div>

<hr>

## linearGradient 線性漸層

參數 :

```css
x1,y1,x2,y2          從 x1,y1 漸層到 x2,y2 , 可以用 5% 或 0.5 表示
gradientTransform    和 CSS 的 transform 一樣
spreadMethod         pad(預設) , reflect , repeat
href                 引用別處定義的 stop 值
```
## radialGradient 圓形漸層

```css
cx,cy,r              圓形漸層的圓心座標和半徑
gradientTransform    和 CSS 的 transform 一樣
spreadMethod         pad(預設) , reflect , repeat
                     (經測試，在 MAC的Safari 和 iphone 沒作用)
fx,fy,fr             在cx,cy,r的圈圈中，漸層的中心點和半徑
href                 引用別處定義的 stop 值

```

範例 :
  
```
$mmcode(r3)
```

<hr>

既然可以用圓形漸層，就可以做出立體的球囉!

```
$mmcode(r4)
```

</div>

2020年9月27日星期日

符號選擇的 APP

接了一個小案子，忙了一陣子，結案後臨時起義寫了個小小的 APP ，用的技巧就是之前的[符號字形](https://yhtpnotes.blogspot.com/2020/07/blog-post_23.html)
  
[Android 安裝](https://play.google.com/store/apps/details?id=tw.com.moralist.yiharng.symbolfinder)

[iOS 安裝](https://apps.apple.com/us/app/symbol-finder/id1533239962)
  
<table>
  <tr><th>主畫面</th><th>Android 的說明畫面</th><th>iOS 的說明畫面</th></tr>
  <tr><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitGsKtwfXjsIjYgZQnBmuEGZtGreZEKkgrCDpJwXp0UKPYG9dYKQZlsbBPPWUhORzHxQy0Rf4bbHughx7rB4ixRoyOHEOGtKHCNYsAkwT34QenTpgdq6ljqcB9pb9YyutMEf95JBoMx3k/s320/Screenshot_20200924-174231.png">
    </td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiptbYDOsk2HMoAovdPtLA7LsURwndvo1FfM_vKWgD72OjRr0dpioKX2pDnJAEn6mL20d-rRMSRZP_yob4yr3cDBPbHUWqpDJbc6DfILT8NwnyshE9sNWcMj1lS03_HAm4-cM9CA9V3qqo/s320/Screenshot_20200924-174323.png">
    </td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqCzqXUNkZsL86RdFn6FuQRGRySVwjkav6aJcAtN8Rxw4OwjlOXUnl9jW2RxCW06D8uyCo5mGxKiwhJ-tZbUpTX_M4WBDCbtP1nxT9lPaUEm8EjoUo8aLMPPvZQfa_tv2y4rgusMxMXdc/s320/IMG_2041.PNG">  
    </td></tr>
</table>
  
程式設計上用了個小技巧，只是設定字碼範圍，然後一個一個掃瞄，過濾掉不存在的字，所以第一次執行時會花點時間，很明顯的，Android 、 iOS 、和 Windows 支援的符號都不相同，連範圍也不同，Android 不同版本也不同，因為我的設計方式是由程式自己搜尋，所以最大的優點就是新的系統有支援新的符號時，都會自動挑出來，然而缺點就是沒有把同類型的全部放在一起，頂多只是靠一些技巧把同類型的範圍盡量放在一起，然後在數學類的上標字和下標字是直接指定，所以在 iOS 或舊版 Android 手機中會出現框框(不存在那個字碼)
  
  其中我個人覺得比較有趣的是數學類的上標字和下標字，例如 : <font color="#00f" style="font-size:1.4em;">**𝐗₂＋𝐘⁽⁴⁺⁵ⁿ⁾**</font>，雖然光靠特別的字碼就可以做到，印象中有些專門的應用程式可以產生這樣的運算式，而且做得更好用，所以我寫這個 APP 這個功能有什麼用呢? 好像只是展示可以做到罷了，或者就是在使用 Line 或 Messanger 可以直接傳出這樣的運算式吧！
  
這個 APP 還有一個我個人覺得有用可以省工的功能大概是輸出 PNG 檔，雖然找個繪圖軟體，畫上這個字就可以了，不過在 Android 和 iOS 上圖示長得不一樣，輸出成 PNG 再使用，可以確保看到的會是一樣的圖。

Translate

2020年11月13日 星期五