珠海建网站设计,虚拟币 wordpress,樟木头电子网站建设报价,wordpress 简书风格使用鼠标绘制多个线条
多个线条#xff0c;肯定不是一笔画过的#xff0c;而是多次画的线条既然是多线#xff0c;那就需要有个容器来管理它们
1 #xff09;建立容器对象
建立一个 lineBox 对象#xff0c;作为承载多边形的容器
// lineBox.js
export default class …使用鼠标绘制多个线条
多个线条肯定不是一笔画过的而是多次画的线条既然是多线那就需要有个容器来管理它们
1 建立容器对象
建立一个 lineBox 对象作为承载多边形的容器
// lineBox.js
export default class lineBox {constructor(gl) {this.gl glthis.children []}add(obj) {obj.gl this.glthis.children.push(obj)}updateVertices(params) {this.children.forEach(ele {ele.updateVertices(params)})}draw() {this.children.forEach(ele {ele.init()ele.draw()})}
}属性 gl webgl上下文对象children 子级 方法 add() 添加子对象updateVertices() 更新子对象的顶点数据draw() 遍历子对象绘图每个子对象对应一个buffer 对象所以在子对象绘图之前要先初始化
2 场景应用
场景鼠标点击画布绘制多边形路径鼠标右击取消绘制鼠标再次点击绘制新的多边形
import LineBox from ./lineBox
import Poly from ./poly// 容器
const lb new LineBox(gl)
// 当前正在绘制的多边形
let poly null// 取消右击提示
canvas.oncontextmenu function() {return false
}// 鼠标点击事件
canvas.addEventListener(mousedown, (event) {if(event.button 2) {popVertice()} else {const { x, y } getMousePosInWebgl(event, canvas)poly ? poly.addVertice(x,y) : crtPoly(x,y)}render()
})// 鼠标移动
canvas.addEventListener(mousemove, (event) {if (poly) {const { x, y } getMousePosInWebgl(event, canvas)poly.setVertice(poly.count - 1, x, y)render()}
})// 删除最后一个顶点
function popVertice() {poly.popVertice()poly null
}// 创建多边形
function crtPoly(x,y) {poly new Poly({vertices:[x,y,x,y],types:[POINTS,LINE_STRIP]})lb.add(poly)
}// 渲染方法
function render() {gl.clear(gl.COLOR_BUFFER_BIT)lb.draw()
}3 场景应用
画一个星座 鼠标第1次点击画布时创建多边形绘制2个点鼠标移动时当前多边形最后一个顶点随鼠标移动鼠标接下来点击画布时新建一个点鼠标右击时删除最后一个随鼠标移动的点 顶点要有闪烁动画建立顶点的时候如果鼠标点击了其它顶点就不要再显示新的顶点
3.1 建立顶点着色器
script idvertexShader typex-shader/x-vertexattribute vec4 a_Attr;varying float v_Alpha;void main() {gl_Position vec4(a_Attr.x, a_Attr.y, 0.0, 1.0);gl_PointSize a_Attr.z;v_Alpha a_Attr.w;}
/scripta_Attr() 是一个4维向量其参数结构为(x, y, z, w) x,y代表位置z代表顶点尺寸w代表顶点透明度w会通过 varying 变量 v_Alpha 传递给片元
3.2 建立片元着色器
script idfragmentShader typex-shader/x-fragmentprecision mediump float;varying float v_Alpha;void main() {float dist distance(gl_PointCoord, vec2(0.5,0.5));if(dist 0.5) {gl_FragColor vec4(0.87, 0.91, 1.0, v_Alpha);} else {discard;}}
/script通过v_Alpha接收透明度然后设置片元的颜色
3.3 建立夜空对象用于承载多边形
const lb new lineBox(gl)3.4 建立合成对象用于对顶点数据做补间运算
const compose new Compose();3.5 声明两个变量用于表示当前正在绘制的多边形和鼠标划上的点
// 当前正在绘制的多边形
let poly null
// 鼠标划上的点
let point null3.6 取消右击提示
// 取消右击提示
canvas.oncontextmenu function() {return false;
}3.7 鼠标按下事件
// 鼠标按下事件
canvas.addEventListener(mousedown, (event) {if(event.button 2) {// 右击删除顶点poly popVertice()} else {const {x,y} getMousePosInWebgl(event, canvas)if(poly) {// 连续添加顶点addVertice(x,y)} else {// 建立多边形crtPoly(x, y)}}
});getMousePosInWebgl() 方法是用于获取鼠标在webgl 画布中的位置我们之前说过。 crtPoly() 创建多边形 function crtPoly(x, y) {let o1 point ? point : { x, y, pointSize: random(), alpha: 1 }const o2 { x, y, pointSize: random(), alpha: 1 }poly new Poly({size: 4,attrName: a_Attr,geoData: [o1,o2],types: [POINTS,LINE_STRIP]})lb.add(poly)crtTrack(o1)crtTrack(o2)
}建立两个顶点数据o1,o2如果鼠标点击了其它顶点o1的数据就是此顶点的数据 顶点的尺寸是一个随机数random() function random() {return Math.random() * 8.0 3.0
}基于两个顶点数据建立多边形对象和两个时间轨对象 crtTrack() 建立时间轨 function crtTrack(obj) {const { pointSize } objconst track new Track(obj)track.start new Date()track.timeLen 2000track.loop truetrack.keyMap new Map([[pointSize,[[500, pointSize],[1000, 0],[1500, pointSize],],],[alpha,[[500, 1],[1000, 0],[1500, 1],],],]);compose.add(track)
}addVertice() 添加顶点 function addVertice(x, y) {const { geoData } polyif(point) {geoData[geoData.length-1] point}let obj { x, y, pointSize:random(), alpha: 1 }geoData.push(obj)crtTrack(obj)
}如果鼠标点击了其它顶点就让多边形的最后一个顶点数据为此顶点 建立下一个顶点的顶点数据添加新的顶点建立新的时间轨 popVertice() 删除最后一个顶点 function popVertice() {poly.geoData.pop()compose.children.pop()poly null
}3.8 鼠标移动事件
canvas.addEventListener(mousemove, (event) {const { x, y } getMousePosInWebgl(event, canvas)point hoverPoint(x, y)if(point) {canvas.style.cursor pointer} else {canvas.style.cursor default}if(poly) {const obj poly.geoData[poly.geoData.length-1]obj.x xobj.y y}
});基于鼠标是否划上顶点设置鼠标的视觉状态 设置正在绘制的多边形的最后一个顶点点位 hoverPoint() 检测所有顶点的鼠标划入返回顶点数据 function hoverPoint(mx, my) {for(let { geoData } of lb.children) {for(let obj of geoData) {if(poly obj poly.geoData[poly.geoData.length-1]) {continue}const delta {x: mx - obj.x,y: my - obj.y}const { x,y } glToCssPos(delta, canvas)const dist x * x y * y;if(dist 100) {return obj}}}return null
}遍历 lb 中的所有顶点数据忽略绘图时随鼠标移动的点获取鼠标和顶点的像素距离若此距离小于10像素返回此点否则返回null glToCssPos() webgl坐标系转css坐标系将之前说过的getMousePosInWebgl() 方法逆向思维即可 function glToCssPos({x,y},{width,height}){const [halfWidth, halfHeight] [width / 2, height / 2]return {x:x*halfWidth,y:-y*halfHeight}
}2.9 连续渲染方法
!(function animate() {compose.update(new Date())lb.updateVertices([x, y, pointSize, alpha])render()requestAnimationFrame(animate)
})();更新动画数据更新Vertices 数据render() 渲染function render(){gl.clear(gl.COLOR_BUFFER_BIT)lb.draw()
}
