前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
以 Vue 为例,我整理了如下的面试题。
如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load(createShapeColor(color));
// 设置阵列模式为 RepeatWrapping
texture.wrapS = THREE.RepeatWrapping
texture.wrapT=THREE.RepeatWrapping
// 设置x方向的偏移(沿着管道路径方向),y方向默认1
//texture.repeat.x = 20;
var shapeLength = getShapeLength(position);
flowto = flowto || ‘+’;
texture.repeat.set(shapeLength/75, 1);
var tubeMaterial = new THREE.MeshPhongMaterial({
map: texture,
transparent: true,
});
var tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial);
tubeMesh.flowto = flowto;
scene.add(tubeMesh);
}
设备实时数据
点击设备可以查看实时数据和运行状态,在三维场景中实时体现状态和值,根据设备不同阈值模拟设备报警。
使用canvas绘制弹窗
function createNoteCanvas(id){
var title =“居民负荷”;
var data = [
{name: “A相电压”, value: “10040863.2”},
{name: “B相电压”, value: “-8086002”},
];
var canvas = document.createElement(“canvas”);
var ctx=canvas.getContext(‘2d’);
canvas.width=550;
canvas.height=data.length*14+30;
canvas.style.border=“1px solid #ccc”;
ctx.fillStyle=“#0C4657”;
strokeRoundRect(ctx,0,0,canvas.width,canvas.height,4.5);
fillRoundRect(ctx,1,1,canvas.width-2,canvas.height-2,5);
var rectH=6;
var rectW=20;
var titleH=12;
ctx.scale(2,2)
ctx.lineWidth = 1;
ctx.strokeStyle = “#ccc”;
ctx.textAlign = “center”;
ctx.fillStyle = “#FFFFFF”;
ctx.fillText(title,32,titleH);
titleH += 14;
ctx.font=“5pt Arial”;
for(var i= 0;i<data.length;i++){
ctx.fillStyle = “#FFFFFF”;
ctx.textAlign=“right”;
ctx.fillText(data[i].name+“:”,60,rectH*i+titleH);
ctx.fillStyle = data[i].color != undefined?data[i].color:“#FFFFFF”;
ctx.textAlign=“left”;
ctx.fillText(data[i].value,60,rectH*i+titleH);
if((i+1)<data.length){
ctx.fillStyle = “#FFFFFF”;
ctx.textAlign=“right”;
ctx.fillText(data[i+1].name+“:”,200,rectH*i+titleH);
ctx.fillStyle = data[i+1].color != undefined?data[i+1].color:“#FFFFFF”;
ctx.textAlign=“left”;
ctx.fillText(data[i+1].value,200,rectH*i+titleH);
i++
}
}
return canvas;
}
使用THREE.SpriteMaterial让创建的弹窗信息永远正对屏幕
function createNote(id,x, z){
var oldId = “”;
if(spriteNote !=null){
oldId = spriteNote.name.split(“$”)[1];
前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
以 Vue 为例,我整理了如下的面试题。