2019年8月31日 星期六

2019年8月30日 星期五

2019年8月28日 星期三

javascript 陣列條件搜尋: filter

我們要在 js 的一個陣列裡面去篩選我們想要的資料,可以使用 filter 的方式,首先我們先準備一個原始資料如下:

var people = [
  {
    name: 'Jason',
    school: '建國中學',
    age: 18
  },
  {
    name: 'Sarah',
    school: '北一女中',
    age: 24
  },
  {
    name: 'Tony',
    school: '成功高中',
    age: 32
  },
  {
    name: 'Susan',
    school: '松山高中',
    age: 16
  }
];

要過濾的話用法如下,我們這邊可以再過濾後生成一個新的 array:
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback
此函式為一個斷言,用於測試陣列中的每個元素。回傳值為 true 時將當前的元素保留至新陣列中,若為 false 則不保留。可傳入三個參數:

element
原陣列目前所迭代處理中的元素。

index(選擇)
原陣列目前所迭代處理中的元素之索引。

array(選擇)
呼叫 filter 方法的陣列。

thisArg(選擇)
執行 callback 回呼函式的 this 值。


要取得年齡大於 20 歲的話
var ageThan20 = people.filter(function(item, index, array){
  return item.age > 20;       // 取得大於 20 歲的
});
console.log(ageThan20); // Tony, Sarah

改成用 function
function isOrderThan(value) {
  return value.age >= 20;
}
var ageThan = people.filter(isOrderThan);

像這樣可以取得特定學校
var school = people.filter(function(item, index, array){
  return item.school == "成功高中"; 
});
console.log(school)

這個熟悉的話對於要再處理物件是很方便的事情。
Read more

2019年8月27日 星期二

2019年8月26日 星期一

SVG 的遮色片- mask 基礎

在 svg 也能使用類似 photoshop 的遮色片的效果,遮色片簡單說就是可以依據你指定的圖片依據本身顏色的資訊,讓被遮的圖片會有半透明的效果,這邊來示範一下,這邊我們設定簡單的紅藍綠來當遮色片:

    
  

接下來像這樣把遮色片指定上去

    
  

結果如下,可以看得出來越深的顏色遮上去後透明度越低。

See the Pen
svg mask color
by deathhell (@deathhell)
on CodePen.




我們也可以用透明度來做遮色片:

See the Pen
svg mask
by deathhell (@deathhell)
on CodePen.


接著我們把遮色片套到圖片上,先指定 svg 的漸層來當 mask

       
       


接著把遮色片套到圖片上就完成了。


See the Pen
svg mask image
by deathhell (@deathhell)
on CodePen.

Read more

2019年8月25日 星期日

2019年8月23日 星期五

2019年8月19日 星期一

[三國創傑傳] 夏候惇トールギスⅢ(夏侯惇托爾吉斯Ⅲ)

P1200578

三國創傑傳魏國(區)的第三隻就是曹操的好兄弟夏侯惇托爾吉斯Ⅲ啦,這次用托爾吉斯Ⅲ大概是為了要用鋼彈 W 系然後又因為有 I, II, III所以可以來當兄弟,目前也確定托爾吉斯會是夏侯淵了,就不知道是否會有托爾吉斯II了。

P1200572P1200573P1200574

Read more

2019年8月18日 星期日

2019年8月17日 星期六

[三國創傑傳] 張郃アルトロンガンダム (張郃雙頭龍鋼彈)

P1200570

三國創傑傳第二隻完成的系列是以 W 鋼彈(EW版)裡的哪吒為原型的張郃雙頭龍鋼彈,這也是魏國的第二隻機體,設定上原本是山賊,後來變成曹操的部下,不過這次的三國創傑傳的劇情真的可以不用理他了。


P1200558P1200559

Read more

2019年8月16日 星期五

CSS 3 動畫- animation

CSS3 Animations

css 3 的動畫在網頁上執行起來很順,現在我在做動畫也都會以 css3 的 animation 為主,要互動的話再加上 js 就好了,基本用法是用一個 @keyframes 開始,這邊用法跟 function 很像,要替 keyframes 取一個名字如下:

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

最簡單的就是 from 到 to,{}內就是要改變的 css 屬性,只要是可以漸變的屬性套進去,css就會把他變成動畫了。

除了 from 到 to 外,還可以設定 %,這樣動畫就會有更多變化,如:
@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

接下來我們要再選擇器上指定要使用這個動畫,最基本的就是指定動畫的名稱跟時間
animation: example 2s;

實際執行結果

See the Pen
css animation
by deathhell (@deathhell)
on CodePen.



比較完整的設定有這些屬性
animation-duration:
動畫執行時間,單位可為 s(秒),這樣動畫就會根據你設定的時間在每個百分比的階段變化



animation-delay:
延遲時間,以 s 為單位

animation-iteration-count:
播放次數,可為數字或是 infinite(無限播放)

animation-direction: 播放方向,有以下參數可以設定
normal: 從 0%播到100%
reverse: 從 100%播到0%
alternate: 播放兩次以上,奇數次從0%到100%,偶數次從100%到0%
alternate-reverse: 跟 alternate 相反


animation-fill-mode:
當動畫停止時顯示的狀態
forwards: 停在最後的狀態
backwards: 停在最初的狀態
both: 視 animation-direction 決定狀態


animation-timing-function:
時間函數,預設為 ease,如果設為 linear 則從頭到尾變化一樣,可以使用的值有
linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)
其中 steps 可以用來作 sprite 動畫
而 cubic-bezier 可以用來自動時間函式,由於數字太抽象,我們可以使用產生器幫我們調整時間函式並產出

animation-play-state:
動畫執行狀態,使用 paused 就會暫停,running 則為執行動畫


可以分開設定,也可以併在一起像這樣:
animation: name 5s linear 2s infinite alternate;

其中除了時間第一個是執行時間,第二個是 delay 時間外,其他的值沒有順序問題。

也可以一次執行很多個動畫如下:
name 5s linear, name2 5s ease
Read more

2019年8月14日 星期三

[三國創傑傳] 曹操ウイングガンダム (曹操飛翼鋼彈)

P1200554

今年 BANDAI 又把三國系列重新拉出來出,大概上次的成效很好,這次一宣布要推出連動畫都安排好了,上次是推出好一陣子才出動畫,模型線也根據動畫有重出一次,編號也從原本的 BB 戰士獨立出來。

想當然重出一定又是以桃園三結義那三個打先鋒,但跟上次不一樣是這次的設定來說變成是公司而不是國家了,主要的勢力還是魏蜀吳,競爭的方式就不是國與國而是公司經營的競爭,講是這樣講但我覺得本質也沒啥變,就是賣模型。

三結義我有買,但那個補色地獄還是不說了,所以反而第一隻完成的是曹操飛翼鋼彈,剛好飛翼鋼彈就是我網站的域名的由來,補了色之後覺得完成度好很多。
Read more

2019年8月13日 星期二

SVG 的圖形剪裁- clip-path

要在 svg 使用 clip-path 可以直接使用已經繪製好的圖形,先用 clipPath 來定義想要拿來當 clip-path 的形狀後,再使用 css 的 clip-path 去指定圖形就可以了,使用的方法為 clip-path:url(定義的形狀),以下則為使用的方法以及把 clip-path 的位置蓋在圖形上位置的表示圖。

See the Pen
svg clip-path
by deathhell (@deathhell)
on CodePen.



比較複雜的形狀以及文字都可以拿來當 clip-path

See the Pen
svg clip-path text
by deathhell (@deathhell)
on CodePen.

Read more

2019年8月12日 星期一

[SDCS] 真ゲッター1 (真蓋特1)

P1200525

前陣子推出的 SDCS 系列,打的是新的 SD 的骨架,除了可動性比以往又更加提升外,有一個有趣的特色是可以選擇是否要裝大腿的腿長切換模式。

P1200515P1200516

一開始的鋼彈我都沒買,反而引起我興趣的是其他機器人的系列,這次入手的就是世界最後之日的 真ゲッター1(真蓋特1)。
Read more

2019年8月11日 星期日

[Vue.js] 搭配 moment.js 處理時間格式

因為有些瀏覽器處理原生的 js 時間會有問題,所以我們會使用像 moment.js 這類的幫我們處理時間。

要搭配 vue 的話只要用一個 method 來處理
methods: {
  moment: function () {
    return moment();
  }
},

再寫一個 filter 去處理想要把時間變成怎樣
filters: {
  moment: function (date) {
    return moment(date).format('MM/DD H:mm');
  }
}

這樣就可以很簡單的幫我們把時間轉換成想要的格式了
{{ date | moment }}
Read more

[Vue.js] 使用 Axios 在網頁讀取時處理載入後的 API 內容

我們在 vue 要處理類似以往的 ajax 讀取時,現在推薦的是使用 axios 來處理,這邊是設定在網頁載入時就讀取 api 的寫法。

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})

把內容顯示出來會長這樣。
{{ info }}

{ "data": { "time": { "updated": "Aug 11, 2019 02:04:00 UTC", "updatedISO": "2019-08-11T02:04:00+00:00", "updateduk": "Aug 11, 2019 at 03:04 BST" }, "disclaimer": "This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org", "chartName": "Bitcoin", "bpi": { "USD": { "code": "USD", "symbol": "$", "rate": "11,352.0083", "description": "United States Dollar", "rate_float": 11352.0083 }, "GBP": { "code": "GBP", "symbol": "£", "rate": "9,430.1133", "description": "British Pound Sterling", "rate_float": 9430.1133 }, "EUR": { "code": "EUR", "symbol": "€", "rate": "10,063.3965", "description": "Euro", "rate_float": 10063.3965 } } }, "status": 200, "statusText": "OK", "headers": { "cache-control": "max-age=15", "content-type": "application/javascript", "expires": "Sun, 11 Aug 2019 02:05:07 UTC" }, "config": { "transformRequest": {}, "transformResponse": {}, "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1, "headers": { "Accept": "application/json, text/plain, */*" }, "method": "get", "url": "https://api.coindesk.com/v1/bpi/currentprice.json" }, "request": {} } 

如果想要拿其中的內容:
axios
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))

結果:
{ "USD": { "code": "USD", "symbol": "$", "rate": "11,352.0083", "description": "United States Dollar", "rate_float": 11352.0083 }, "GBP": { "code": "GBP", "symbol": "£", "rate": "9,430.1133", "description": "British Pound Sterling", "rate_float": 9430.1133 }, "EUR": { "code": "EUR", "symbol": "€", "rate": "10,063.3965", "description": "Euro", "rate_float": 10063.3965 } } 

可以再繼續對取回的內容做處理:
axios
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => {
  this.info= response.data.bpi.filter( d=> d.code=="USD")
}
)

就會回傳 code=USD 的那一項的內容

參考:Using Axios to Consume APIs
Read more

2019年8月10日 星期六

2019年8月8日 星期四

Q版 ACG 制服美少女

畫一些 Q 版的 ACG 制服美少女

常磐胡桃
常磐胡桃
登場作品:戰鬥女子學園

蛇喰夢子
蛇喰夢子
登場作品:狂賭之淵

霞ヶ丘 詩羽
霞ヶ丘 詩羽
登場作品: 不起眼女主角培育法

成瀨澪
成瀨澪
登場作品: 新妹魔王的契约者

亞美
亞美
登場作品: Love Selection

煌坂紗矢華
煌坂紗矢華
登場作品: 噬血狂襲
Read more

2019年8月7日 星期三

2019年8月6日 星期二

2019年8月5日 星期一

2019年8月4日 星期日

2019年8月1日 星期四

php 解析 xml 資料

如果想在 php 裡解析 xml 格式的資料,我們可以使用 SimpleXML 幫我們處理,因為 php 已經內建了所以不用額外讀取其他東西,假設我們先準備這樣的 xml:


Tove
    Jani
    Reminder
    Don't forget me this weekend!



然後使用 simplexml_load_file 再把資料解析出來就好了。
$xml=simplexml_load_file("note.xml");
print_r($xml);


要解析每個節點的值
$xml=simplexml_load_file("note.xml");
echo $xml->to . "
";
echo $xml->from . "
";
echo $xml->heading . "
";
echo $xml->body;

用迴圈把資料讀出來
$xml=simplexml_load_file("note.xml");
echo $xml->getName() . "
";
 
foreach($xml->children() as $child)
{
    echo $child->getName() . ": " . $child . "
";
}

可以得到如下的結果:
note
to: Tove
from: Jani
heading: Reminder
body: Don't forget me this weekend!
Read more
Related Posts Plugin for WordPress, Blogger...