From 45f2d6f4ebbabd259189254420eca98c80ac50c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A4=A7=E8=83=86?= <1101282782@qq.com> Date: Wed, 9 Jul 2025 11:26:33 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=97=B4=E8=B7=9D=E5=A4=A7?= =?UTF-8?q?=E5=80=BC=20=E7=BC=93=E5=86=B2=E5=8C=BAbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Obj/Base/PolylineObject/_element.js | 11 +++++----- src/Obj/Base/PolylineObject/eventBinding.js | 20 +++++++++-------- src/Obj/Base/PolylineObject/index.js | 13 +++++++---- .../FlowDashedLineFlowMaterialProperty.js | 22 ++++++++++--------- .../Materail/LineTextureMaterialProperty.js | 5 ++++- .../Materail/PolylineFlowMaterialProperty.js | 7 ++++-- .../PolylineFlowMultMaterialProperty.js | 6 +++-- src/Tools/index.js | 6 +++-- 8 files changed, 54 insertions(+), 36 deletions(-) diff --git a/src/Obj/Base/PolylineObject/_element.js b/src/Obj/Base/PolylineObject/_element.js index 383e9bd..1f01892 100644 --- a/src/Obj/Base/PolylineObject/_element.js +++ b/src/Obj/Base/PolylineObject/_element.js @@ -103,20 +103,19 @@ function html(that) {
- 动画倍数 + 动画时长
+ s
- - 间距 -
- + 间距 +
+
-
diff --git a/src/Obj/Base/PolylineObject/eventBinding.js b/src/Obj/Base/PolylineObject/eventBinding.js index bcbf281..7a665f8 100644 --- a/src/Obj/Base/PolylineObject/eventBinding.js +++ b/src/Obj/Base/PolylineObject/eventBinding.js @@ -22,7 +22,7 @@ class eventBinding { let isEvent = false let removeName = [] if (!elements[i] || !elements[i].attributes) { - continue + continue } for (let m of elements[i].attributes) { switch (m.name) { @@ -38,13 +38,15 @@ class eventBinding { if (e.target.type == 'number') { if (e.data != '.' && (e.data != '-' || e.target.value)) { value = Number(value) - if((e.target.max) && value>Number(e.target.max)) { + if ((e.target.max) && value > Number(e.target.max)) { value = Number(e.target.max) + e.target.value = value } - if((e.target.min) && value { let value = e.target.value - if(e.target.type == 'number' && value!='') { + if (e.target.type == 'number' && value != '') { value = Number(value) e.target.value = value } @@ -97,7 +99,7 @@ class eventBinding { } // elements[i].attributes[m] = undefined } - for(let n=0;n { item.value = v @@ -1681,9 +1684,11 @@ class PolylineObject extends Base { document.getElementById('dashTextureDom').style.display = 'none' } if (2 < this.lineType && this.lineType < 5) {//尾迹参数 - document.getElementById('lineSpace').style.display = 'none' + document.getElementsByClassName('lineSpace')[0].style.display = 'none' + document.getElementsByClassName('lineSpace')[1].style.display = 'none' } else { - document.getElementById('lineSpace').style.display = 'flex' + document.getElementsByClassName('lineSpace')[0].style.display = 'flex' + document.getElementsByClassName('lineSpace')[1].style.display = 'flex' } break } diff --git a/src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js b/src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js index b5a4fbe..546cda6 100644 --- a/src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js +++ b/src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js @@ -12,7 +12,7 @@ function FlowDashedLine() { this._dashSize = undefined; this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)"); this.speed = options.speed != undefined ? options.speed : 1.0;//速度 - this.space = options.space || 0.01;//速度 + this.space = options.space || 0.0;//速度 this.dashSize = options.dashSize || 0.03;//速度 this.uType = options.uType === undefined ? 1 : options.uType;//类型：0：普通流动线 1：虚化虚线 this.lineBackAlpha = options.lineBackAlpha || 0.05; @@ -105,15 +105,16 @@ function FlowDashedLine() { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; - // 计算流动虚线 - float dashSize = 0.03; - // float gapSize = 0.01; - // float dashSize = dashSize; + float dashSize = 0.1; float gapSize = space; - float progress = fract(speed * czm_frameNumber * 0.01); // 时间控制流动 - float pattern = fract(st.x / (dashSize + gapSize) + progress); - float dash1 = step(0.1, pattern) - step(0.9, pattern); - float dash2 = smoothstep(0.0, 0.4, pattern) - smoothstep(0.6, 1.0, pattern); + // speed现在表示完成一次完整动画循环的秒数 + float progress = speed==0.0 ? 0.0 : fract(frameNumber / 1000.0 / speed); + float pattern = fract(st.x / dashSize * (1.0 + gapSize) + progress / dashSize * (1.0 + gapSize)); + float dash1 = step(0.0, pattern) - step(1.0/(1.0 + gapSize), pattern); + float dash2 = smoothstep(0.0, 0.2, pattern) - + smoothstep(1.0/(1.0 + gapSize), + 1.0/(1.0 + gapSize) + 0.2, + pattern); float dash = (float(uType) != 1.0)?dash1:dash2; material.alpha = dash; material.diffuse = color.rgb; @@ -129,8 +130,9 @@ function FlowDashedLine() { uniforms: { color: new Cesium.Color(1.0, 1.0, 1.0, 1.0), speed: 1, - space: 0.01, + space: 0.0, dashSize: 0.03, + frameNumber: Cesium.getTimestamp(), uType: 1, lineBackAlpha: 0.05, }, diff --git a/src/Obj/Materail/LineTextureMaterialProperty.js b/src/Obj/Materail/LineTextureMaterialProperty.js index 2fedee1..5bed3ec 100644 --- a/src/Obj/Materail/LineTextureMaterialProperty.js +++ b/src/Obj/Materail/LineTextureMaterialProperty.js @@ -55,6 +55,7 @@ function LineTexture() { 1.0, result.repeat ); + result.frameNumber = Cesium.getTimestamp(); return result; } @@ -90,7 +91,8 @@ function LineTexture() { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; st.s *= repeat; // 关键：通过repeat控制纹理密度 - vec4 colorImage = texture2D(image, vec2(fract(st.s + speed*czm_frameNumber* 0.01), st.t)); + // vec4 colorImage = texture2D(image, vec2(fract(st.s + speed*czm_frameNumber* 0.01), st.t)); + vec4 colorImage = speed==0.0?texture2D(image, vec2(fract(st.s), st.t)):texture2D(image, vec2(fract(st.s + frameNumber / 1000.0 / speed * repeat ), st.t)); material.alpha = colorImage.a * color.a; material.diffuse = color.rgb; return material; @@ -106,6 +108,7 @@ function LineTexture() { image: '', repeat: 1.0, speed: 1.0, + frameNumber: Cesium.getTimestamp(), uTime: 1 }, source: Cesium.Material.LineTextureMaterialSource, diff --git a/src/Obj/Materail/PolylineFlowMaterialProperty.js b/src/Obj/Materail/PolylineFlowMaterialProperty.js index 95021fc..5621365 100644 --- a/src/Obj/Materail/PolylineFlowMaterialProperty.js +++ b/src/Obj/Materail/PolylineFlowMaterialProperty.js @@ -50,7 +50,8 @@ function PolylineFlow() { result.rotate ); result.lineBackAlpha = this.lineBackAlpha; - result.frameNumber = Cesium.getTimestamp(); + result.frameTime = Cesium.getTimestamp(); + // result.frameNumber = Cesium.getTimestamp(); return result; } @@ -88,7 +89,8 @@ function PolylineFlow() { vec2 st = materialInput.st; //获取当前帧数，10秒内变化0-1 // float time = fract(czm_frameNumber * speed / 60.0); - float time = fract(abs(speed) * czm_frameNumber * 0.01); + // float time = fract(abs(speed) * czm_frameNumber * 0.01); + float time = fract(frameTime / 1000.0 / abs(speed)); //长度1/10 // time = time * (1.0 + 0.1); float staticAlpha = rotate?smoothstep(0.0,1.0, 1.0-st.s) * step(-1.0,-(1.0-st.s)):smoothstep(0.0,1.0, st.s) * step(-1.0,-st.s); @@ -114,6 +116,7 @@ function PolylineFlow() { color: new Cesium.Color(1.0, 1.0, 1.0, 1.0), speed: 0.1, rotate: true, + frameTime: Cesium.getTimestamp(), lineBackAlpha: 0.05, }, source: Cesium.Material.PolylineFlowMaterialSource, diff --git a/src/Obj/Materail/PolylineFlowMultMaterialProperty.js b/src/Obj/Materail/PolylineFlowMultMaterialProperty.js index 473136c..8e37538 100644 --- a/src/Obj/Materail/PolylineFlowMultMaterialProperty.js +++ b/src/Obj/Materail/PolylineFlowMultMaterialProperty.js @@ -50,7 +50,7 @@ function PolylineFlowMult() { result.rotate ); result.lineBackAlpha = this.lineBackAlpha; - result.frameNumber = Cesium.getTimestamp(); + result.frameTime = Cesium.getTimestamp(); return result; } @@ -91,7 +91,8 @@ function PolylineFlowMult() { // 高频时间轴（控制高光点） // float highlightTime = fract(czm_frameNumber * speed * 3.0 / 60.0); - float highlightTime = fract(abs(speed) * czm_frameNumber * 0.01); + // float highlightTime = fract(abs(speed) * czm_frameNumber * 0.01); + float highlightTime = fract(frameTime / 1000.0 / abs(speed)); float highlightSpacing = 0.3; // 高光点间隔 // 主光带透明度计算 @@ -151,6 +152,7 @@ function PolylineFlowMult() { color: new Cesium.Color(1.0, 1.0, 1.0, 1.0), speed: 0.1, rotate: true, + frameTime: Cesium.getTimestamp(), lineBackAlpha: 0.05, }, source: Cesium.Material.PolylineFlowMaterialSource, diff --git a/src/Tools/index.js b/src/Tools/index.js index d8cc632..3cf0284 100644 --- a/src/Tools/index.js +++ b/src/Tools/index.js @@ -555,6 +555,7 @@ class Tools { // dashSize: newParam.dashSize, space: newParam.space }) + console.log(newParam.space) break case 6: //流动虚线2 material = new Cesium.FlowDashedLineFlowMaterialProperty({ @@ -595,19 +596,20 @@ class Tools { // myImg.src = that.getSourceRootPath() + '/img/arrow/1.png' myImg.src = options.image myImg.onload = function () { + options.space = Math.max(0.1, options.space); if (options.speed > 0 || options.speed == 0) { canvasEle.width = myImg.width * (options.space + 1) canvasEle.height = myImg.height ctx.drawImage(myImg, myImg.width * (options.space / 2), 0) } else { ctx.clearRect(0, 0, canvasEle.width, canvasEle.height); - ctx.save(); // 保存当前状态 canvasEle.width = myImg.width * (options.space + 1) canvasEle.height = myImg.height + ctx.save(); // 保存当前状态 ctx.translate(canvasEle.width / 2, canvasEle.height / 2); // 移动原点至中心 ctx.rotate(Math.PI); // （弧度制） ctx.translate(-canvasEle.width / 2, -canvasEle.height / 2); // 移回原点 - ctx.drawImage(myImg, -myImg.width * (options.space / 2), 0) + ctx.drawImage(myImg, myImg.width * (options.space / 2), 0) ctx.restore(); // 恢复状态 }