arcgis js 4 使用d3.js 添加滤镜光

2022-04-26  本文已影响0人  haibalai

我们利用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

上一篇下一篇

猜你喜欢

热点阅读