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(){
posted @ 2022-01-20 17:33  haibalai  阅读(55)  评论(0编辑  收藏  举报