css2drenderer.js（css2drendererjs引入錯誤）

本文目錄一覽：

• 1、Three.js中的CSS2DObject和CSS2DRenderer
• 2、Canvas 使用指南
• 3、threejs–模型動畫線性控制
• 4、怎麼在頁面里引入bootstrap的css和js文件
• 5、electron中vue，table渲染大量數據卡頓
• 6、全網最詳bpmn.js教材-事件篇

Three.js中的CSS2DObject和CSS2DRenderer

使用CSS2DObject和CSS2DRenderer可以繪製一個2D效果的標籤，用於展示一些信息。

通過閱讀CSS2DRenderer的源碼可以知道，CSS2DRenderer會遞歸遍歷scene去找到CSS2DObject來進行渲染得到標籤內容信息。CSS2DObject可以添加進入你想要展示其的mesh當中。

CSS2DRenderer需要在渲染器當中進行相應的配置。

Canvas 使用指南

canvas 的能力是通過 context 對象表現出來的，context一般稱為繪圖環境。

DOMString 為 “2d” 時，context 是 CanvasRenderingContext2D 對象；(本文重點)

DOMString 為 “webgl” 時，context 是 WebGLRenderingContext 對象；

DOMString 為 “webgl2” 時，context 是 WebGL2RenderingContext 對象；

DOMString 為 “bitmaprenderer” 時，context 是 ImageBitmap 對象；

CanvasRenderingContext2D 對象實例 instance 共有16個屬性，只要設置了這些屬性，就會影響 instance 調用繪製方法時的表現，常用的有：

注意：可使用 instance 的 save() 和 restore() 方法來臨時修改 instance 的屬性

1、一般用來保存數據，不展示在瀏覽器頁面上，創建的兩種方式：a、css 方式設置為 display:none；b、JS創建 document.createElement(‘canvas’)；

2、與HTML結合使用：可以採用 CSS 定位的方式，將 HTML 元素置於 canvas 元素之上，比如：在 canva 上疊加一個 div panel 作為某個開關控制界面；選景橡皮筋；時鐘等

3、也可使用兩個 canvas，一個用來顯示，另一個用來做數據準備和處理，這種方式通常效率高，但比較耗費內存

1、準備一個繪製背景的函數，用於每次擦除上一次繪製的結果

2、繪製輔助線

3、監聽事件，做坐標轉換 windowToCanvas

4、繪製內容的保存於恢復

5、三事件

onmousedown：保存初始 canvas 繪製狀態

onmousemove: 更新位置信息，並不斷調用初始 canvas 繪製狀態來擦除上一個繪製

onmouseup: 調用初始 canvas 繪製狀態來擦除上一個繪製，並根據onmousemove保存的信息做最終繪製，將結果繪製在 canvas 上

fillStyle 和 strokeStyle 可以是任意有效的css顏色值或者漸變色以及圖像Pattern

canvas 某一時刻只能有一條路徑存在，這條路徑可以包含多條子路徑。用 beginPath 來開始一條新路徑或清除上一次子路徑

textAlign: left,center,right

textBaseline: top,middle,bottom

1、三屬性 font,textAlign,textBaseline

2、三方法 strokeText, fillText, measureText

strokeText(text,x,y,maxWidth) 指定文本超過maxWidth會被縮放

measureText(text).width 返回指定文本寬度

3、水平垂直居中

注意每次變換前，用 save 和 restore 來保存原來繪製上下文

1、由路徑定義的一片區域，如一個三角形，矩形，圓形，然後調用 clip 即可得到剪輯區域

2、默認和 canvas 大小一致

3、設置剪輯區域後，瀏覽器將只對該區域進行繪製

4、調用clip會把剪輯區域設為當前剪輯區域與當前路徑定義的區域的交集，故clip 的調用經常在 save 和 restore 之間，這是為了防止剪輯區域越來越小

主要是 drawImage,getImageData,putImageData,createImageData 四個 API

threejs–模型動畫線性控制

最近遇見一個比較有意思需求，需要將模型動畫像視頻一樣可以線性拖拽播放動畫進程、調節動畫播放速度及隨時暫停和播放動畫。效果如下圖

現在開始乾貨分享：

1. 初始化場景、相機、燈光、及模型加載的基本工作就不再贅述了，不太清楚的朋友看下threejs–初創項目。

2. 需要一個k好動畫的模型，這個大家可以自己完成 

3. 我們需要一個可以自由滑動的滑塊，用來記錄動畫播放的進程。還需要一個暫停和播放的按鈕來控制動畫的開啟和暫停

p class=”h_manualDrop”span裝配進度/spaninput class=”h_manualInstallVal” type=”range” min=”0″ step=”0.01″/p

4. 模型加載階段 我們需要對模型動畫進行處理

load.loader(‘./model/test.glb,function(gl){

    scene.add(gl.scene)//將模型加入到場景中

   mixer =new THREE.AnimationMixer(gl.scene);

   action = mixer.clipAction(gl.animations[0]);

    action.play();///

    $(‘.h_manualInstallVal’).attr(‘max’,glb.animations[0].duration.toFixed(1));// 給滑塊初始值

    renderer.render( scene, camera );//渲染

})；

5. 在刷新場景時同步滑塊上動畫進度

function onUpdate() {

let renderTime = clock.getDelta();

if (action) {// 實時更新滑塊進度

$(‘.h_manualInstallVal’).val(action.time);

}

if (mixer) {

mixer.update(renderTime);

}

requestAnimationFrame( onUpdate );

renderer.render( scene, camera );

controls.update();// 想讓相機控制器有效 這個就需要實時更新控制器。必須在攝像機的變換髮生任何手動改變後調用

}

6. 滑塊添加事件，反向控制模型動畫播放進度

$(‘.h_manualInstallVal’).on(‘input’,function (){

  action.time=$(this).val()*1;

  action.paused=true;

  $(‘.h_manualDrop’).attr(‘data-bool’,’act’);

})

7.  播放暫停按鈕控制動畫的播放與暫停

$(‘.h_manualDrop’).on(‘click’,function (){// 動畫 播放與暫停

if($(this).attr(‘data-bool’)==’act’){

$(this).attr(‘data-bool’,”);

      action.paused=false;

  }else{

$(this).attr(‘data-bool’,’act’);

      action.paused=true;

  }

});

結語：模型的自主操控之前已經講過了，不再贅述，歡迎大家一起學習交流 需要測試模型的話 可以給我留言 

怎麼在頁面里引入bootstrap的css和js文件

在頁面里引入bootstrap的css和js文件在方法有兩種

第一種方去

用代理引用的方法，不用下載文件,直接在頭部寫引入代碼。

!doctype html

html

head

  meta name=”renderer” content=”webkit|ie-comp|ie-stand”

  meta charset=”utf-8″

  title2B前端/title

  meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″

  meta name=”description” content=””

  meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”

  link href=”” rel=”stylesheet”

  script src=””/script

  script src=””/script

/head

……

第二種方法

就是下載本地引用的方法  

1. 到下載文件

2 把下載的文件進行引用

!doctype html

html

head

  meta name=”renderer” content=”webkit|ie-comp|ie-stand”

  meta charset=”utf-8″

  title2B前端/title

  meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″

  meta name=”description” content=””

  meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”

  link href=”/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet”

  script src=”/jquery/3.0.0/jquery.min.js”/script

  script src=”/bootstrap/3.3.6/js/bootstrap.min.js”/script

/head

……

electron中vue，table渲染大量數據卡頓

在這個electron項目里，使用element-ui中的el-table渲染了很多數據（大於100條，每條中輸入框不小於10個），造成了 輸入時十分卡頓，內存佔用達到了100M，需求方又不想分頁，只能尋求折中的方案。

該方案內置了el-table，也就是說你可以不用使用element-ui也是可以用的。

首先安裝pl-table

npm i pl-table

main.js中

import plTable from ‘pl-table’

import ‘pl-table/themes/index.css’

Vue.use(plTable)

這裡寫一下我的pl-table使用時候的配置:

pl-table

            ref=”plTable”

            :datas=”showTableData”

            :row-height=”65″

            :pt-total=”filterTableData.length”

            :page-size=”pageSize”

            :excess-rows=”1″

            :height-change=”false”

            :current-page=”currentPage”

            :page-sizes=”[100, 200, 300, 400, 500]”

            no-data-height=”calc(100vh – 154px)”

            auto-resize

            use-virtual

            @handlePageSize=”handlePageSize”

默認可以使用分頁,更多api請自行百度。

如果表格無法顯示:

.electron-vue中webpack.web.config.js 我這裡是52-58行替換

{

        test: /\.js$/,

        use: ‘babel-loader’,

        include: [ path.resolve(__dirname, ‘../src/renderer’) ],

        exclude: file = /node_modules/.test(file)  !/\.vue\.js/.test(file)  !/pl-table/.test(file)

      }

然後重啟electron 就可以顯示了。

然後分頁和表格的間距默認是20px。我們這裡改一下，不要這麼大的間距

.plTableBox .myPagination{

  padding-top: 0;

}

全網最詳bpmn.js教材-事件篇

bpmn.js 是一個BPMN2.0渲染工具包和web建模器, 使得畫流程圖的功能在前端來完成.

因為公司業務的需要因而要在項目中使用到 bpmn.js ,但是由於 bpmn.js 的開發者是國外友人, 因此國內對這方面的教材很少, 也沒有詳細的文檔. 所以很多使用方式很多坑都得自己去找.在將其琢磨完之後, 決定寫一系列關於它的教材來幫助更多 bpmn.js 的使用者或者是期於找到一種好的繪製流程圖的開發者. 同時也是自己對其的一種鞏固.

由於是系列的文章, 所以更新的可能會比較頻繁, 您要是無意間刷到了且不是您所需要的還請諒解 ?.

不求贊?不求心❤️. 只希望能對你有一點小小的幫助.

所有教材的github地址: 《bpmn-chinese-document》

上一章節我們介紹了利用 bpmn.js 與後台進行交互, 要是對 bpmn.js 不了解的小伙請移步:

《全網最詳bpmn.js教材-http請求篇》

這一章節要講解是關於 bpmn.js 的一些事件, 通過學習此章節你可以學習到:

很多時候你期望的是在用戶在進行不同操作的時候能夠監聽到他操作的是什麼, 從而做想要做的事情.

是進行了 shape 的新增還是進行了線的新增.

比如如下的一些監聽事件:

繼續在項目案例 bpmn-vue-basic 的基礎上創建一個 event.vue 文件:

並在 success() 函數中添加上監聽事件的函數:

如圖所示, 在這裡你就可以獲取到相關節點的所有信息了:

案例Git地址: LinDaiDai-bpmn.js案例event.vue

上面介紹的是監聽 modeler 並綁定事件, 可能你也需要監聽用戶點擊圖形上的 element 或者監聽某個 element 改變:

繼續在 success() 上添加監聽事件:

配置好 addEventBusListener() 函數後, 在進行元素的點擊、新增、移動、刪除的時候都能監聽到了.

但是有一點很不好, 你在點擊“畫布”的時候, 也就是 根元素 也可能會觸發此事件, 我們一般都不希望此時會觸發, 因此我們可以在 on 回調中添加一些判斷, 來避免掉不需要的情況:

此時我們可以把監聽到返回的節點信息打印出來看看:

如上圖, 它會打印出該節點的 Shape 信息和 DOM 信息等, 但我們可能只關注於 Shape 信息(也就是該節點的 id、type 等等信息), 此時我們可以使用 elementRegistry 來獲取 Shape 信息:

或者你也可以直接就用 e.element 獲取到 Shape 的信息, 我比較了一下它們兩是一樣的. 但是官方是推薦使用 elementRegistry 的方式.

上面我們已經介紹了 modeler 和 element 的監聽綁定方式, 在事件應用中, 你更多的需要知道用戶要進行什麼操作, 好寫對應的業務邏輯.

這裡我就以我工作中要用到的場景為案例進行講解.

案例Git地址: LinDaiDai-bpmn.js案例event.vue 喜歡的小夥伴請給個 Star ?呀, 謝謝?

系列全部目錄請查看此處: 《全網最詳bpmn.js教材》

系列相關推薦:

《全網最詳bpmn.js教材-基礎篇》

《全網最詳bpmn.js教材-http請求篇》

《全網最詳bpmn.js教材-renderer篇》

《全網最詳bpmn.js教材-contextPad篇》

《全網最詳bpmn.js教材-編輯、刪除節點篇》