arcgis js 4 使用d3.js 添加滤镜光
我们利用d3滤镜为d3元素增加光的效果
我们存一些全局变量
-
this.animateOption = null;
-
this.defs = null;
-
this.animateId = "";
-
this.feDropShadow = null;
滤镜初始化
-
function create(option){
-
this.animateOption = option;
-
this.defs = this.svg.append("defs");
-
let linearGradient = this.defs.append("filter")
-
.attr("id",this.animateOption.id)
-
.attr("x","-50%")
-
.attr("y","-50%")
-
.attr("width","200%")
-
.attr("height","200%")
-
-
this.feDropShadow = linearGradient.append("feDropShadow")
-
.attr("dx", "0")
-
.attr("dy","0")
-
.attr("stdDeviation","0")
-
.attr("flood-color",this.animateOption.floodColor)
-
}
启动滤镜
```javascript
function start(){
let multiplier = this.animateOption.speed;
let xDiff= 0.01;
let yDiff= 0.01;
let that = this;
function setBlur(x,y){
that.feDropShadow.attr("stdDeviation",x);
}
let flag = true;
-
(function updateMotionBlur(){
更多参考 https://xiaozhuanlan.com/topic/8193652740
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律