kctalk

[kctalk]

《 做技術的人切忌因為個人一時喜好而瞎折騰 》

https://www.zhihu.com/question/63222133/answer/206812503

➊ 做技術的人切忌因為個人一時喜好而瞎折騰。話語權越大責任越大，改門的決定不能輕率。

➋ 技術這種東西夠用就行了，最終還是為了業務服務，只要業務能跑，真的沒有必要開坑折騰。

➌ 做商業產品，千萬不要把個人 geek 那套思路拿出來。改變世界的不是技術本身，而是使用技術做出來的產品。

[kctalk]

解決bootstrap modal和vuejs2官方modal問題的方案

[kctalk]

bootstrap3 img-responsive not working in ie

解法

.img-responsive      width: 100%      max-width: 100%

[kctalk]

[webpack]path

原本示範的影片在output中只寫了

output: {              path: ( './dist' ),      filename: "app.bundle.js" },

結果範例影片是用2.0.0版的webpack 沒想到現在用了2.4.1，範例教的就過不了。後來查了一下網路的文件，要改成如下面的寫法

var path = require( "path" ); module.exports = {     entry: "./src/app.js",     output: {         path: path.resolve( __dirname, './dist' ),         filename: "app.bundle.js"    },

[kctalk]

相容於IE11及以下的IE判斷法

相容於IE11及以下的IE判斷法

function isIe(){  return ("ActiveXObject" in window); }

[kctalk]

[IE的雷] read radio button value

 var ua = window.navigator.userAgent;  var msie = ua.indexOf("MSIE ");  if (msie > 0){    radio.value = getValueFromRadioButton('radioBtnName')  }

function getValueFromRadioButton(name) {

  //Get all elements with the name   var buttons = document.getElementsByName(name);   for(var i = 0; i < buttons.length; i++) {      //Check if button is checked      var button = buttons[i];      if(button.checked) {         //Return value         return button.value;      }   }   //No radio button is selected.   return null; }

先判斷瀏覽器，如果是IE再把radio的value用getValueFromRadioButton以Name取值回填。

[kctalk]

eml檔案在mac上的製作

客戶要求一個內部的EDM檔案，格式為eml，那在mac上怎麼製作呢？

一樣先切好html檔

以safari開啟切好的html檔

從safari中「檔案 ＞ 分享 ＞ 郵寄此網頁」，進入到mac的郵件軟體。

寄給自己

打開收到的信，「檔案 ＞ 儲存為 ＞ 郵件檔案格式」

存好的檔就是eml檔，可以再用文字編輯器編輯內容。

[kctalk]

由vue-cli建立簡單的vue.js樣版

$ vue init webpack-simple my-project $ cd my-project $ npm install $ npm run dev

[kctalk]

可以試著自己寫看看的幻燈片效果 可惜這效果沒有寫RWD 如果自己寫應該會是怎樣呢？

[kctalk]

也算是種應用了

[kctalk]

真實的寄送時間這點滿有趣的，有收集的要素也是我喜歡的元素，但交筆友這個我就好懶。

[kctalk]

很有GAME感的線上字型處理應用

好想要有一份工作是專門做這種有趣的應用

[kctalk]

[away3D 4.0] 平行投影的使用

在做2.5D地圖的FB GAME時，如果要用3D的物件放個東西到地圖上，有透視的東西往往會格格不入。一般來說我們會在3D場景中，create一個3d的camera，只要在下��再多加一行就好了。

code如下：

var Ocam:Camera3D = new Camera3D(); Ocam.lens = new OrthographicLens(projectionHeight);

最前面要import away3d.cameras.lenses.OrthographicLens; 其中projectionHeight的大小會影響可視區域的大小

[kctalk]

Testing EnselJS

為什麼使用EnselJS

以Flash使用者的使用經驗來看，這一套是最接近Flash的使用方式；

使用語法與習慣接近，適合老Flasher來進入html5的領域… XD

其實還有一套叫 flashJS，來不及看，所以先用看過的…

EnselJS的Class分類

stage stage包Canvas，DisplayObject被addChild到stage中，stage不斷的在update()或tick()中更新內容； canvas = document.getElementById("canvas的ID"); stage = new Stage(canvas);

類似Flash中的DisplayObject類別 Container：AS3是DisplayObjectContainer，把各DisplayObject再包起來再群組的工具 Bitmap：放圖片和影片用的 BitmapAnimation：放連結圖檔動畫（SpriteSheet）用的 Text：文字 Shape：放graphics畫出來的物件用的。 stage.addChild( DisplayObject )

類似Flash中MovieClip的方法類別，以下兩種皆不是DisplayObject，需要置放進對應的容器才能夠被addChild到stage中 graphics SpriteSheet

和Flash AS3的比對來學習>就動畫的使用上來比對說明

Flash中使用MovieClip來做動畫 使用play()、gotoAndStop()、gotoAndPlay()的方式來控制MovieClip

EnselJS使用SpriteSheet來製作類似MovieClip的物件, 也使用gotoAndPlay()與gotoAndPlay()相同的語法, 讓原本使用flash的使用者覺得親切

範例1，使用SpriteSheet來製作一個人物走路的動畫、使用BitmapAnimation做一個容器將SpriteSheet置入，再用addChild的方式加載進stage中 在gotoAndPlay()這方法中使用呼叫frame數的方法來控制 SpriteSheet http://192.168.43.33/~apple/EaselJStest/aniTest1.html 

使用Zoe來匯出連續圖檔 動畫全放在主場景上 使用grahpic元件，拉足影格 > 這種作法可能也可以轉出用AS創作的動畫 

範例2，使用function tick來不斷的改變元件的屬性，如同flash的onEnterFrame、setInterval等事件與方法。 http://192.168.43.33/~apple/EaselJStest/aniTest2.html 

範例3，加入判斷式來改變運行方向 http://192.168.43.33/~apple/EaselJStest/aniTest3.html 

範例4，在gotoAndPlay()這方法中使用flag的呼叫的方式來控制SpriteSheet，SpriteSheet對應的寫法。 使用DisplayObject中scaleX的方式來做物件的鏡射  http://192.168.43.33/~apple/EaselJStest/aniTest4.html 

TweenJS

主語法： Tween.get( 對像, {loop:true/false}) .to({屬性: 值} , 時間/豪秒)  .wait(時間/豪秒)  http://192.168.43.33/~apple/html5Test/aniTest5.html

和Flash AS3的比對來學習>就互動的方式來比對說明

滑鼠的控制Event：onPress、onRelease、onClick、onMouseOver、onMouseUp DisplayObject.事件類別 = function(){ }

http://192.168.43.33/~apple/html5Test/ctrlTest/helloWorld.html btn.onPress = showText  showText=function(){…} 

http://192.168.43.33/~apple/html5Test/test05.html for迴圏 (function(target) {      bmp.onPress = function(evt) {      } })(bmp) 

參考資源

EnselJS http://easeljs.com/

TweenJS http://tweenjs.com/

動畫方式 http://blogs.msdn.com/b/davrous/archive/2011/07/21/html5-gaming-animating-sprites-in-canvas-with-easeljs.aspx

EaselJS新手上路 http://blog.eddie.com.tw/2011/09/10/introduction-to-easeljs/

件者Grant Skinner http://gskinner.com/blog

Zoe http://easeljs.com/zoe.html