本文目录一览：
- 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教材-编辑、删除节点篇》