jquery - 当前框的阴影显示
问题描述
我已经把 ctx 放到 shadowColor = "white"; 当我创建框时单击按钮并将其删除。但是,当第二个红色框出现时,我想删除第一个框的阴影颜色,并且阴影应该只应用于第二个框。应该就像当他们单击按钮时,第一个框将是红色的阴影,然后会转到第二个框。第二个框将变为红色并带有阴影,而第一个框将变回灰色背景色但没有阴影。请帮忙。谢谢..
您可以在此处访问代码: https ://codesandbox.io/s/elastic-kare-hwkq2?file=/index.html:0-2151
var data = [
{
name: "1",
x: 20,
y: 21,
width: 80,
height: 80,
bgColor: "#00FF00",
radius: 2,
version: "1.0.0"
},
// for horizontal
{
name: "5",
x: 110,
y: 21,
width: 80,
height: 80,
bgColor: "#00FF00",
radius: 2
},
{
name: "6",
x: 200,
y: 21,
width: 80,
height: 80,
bgColor: "#00FF00",
radius: 2
}
];
var c = document.getElementById("NodeList");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
// set initial blur of 3px
for (let i = 0; i < data.length; i++) {
// loop through the data array
const _data = data[i];
ctx.beginPath(); // Call beginPath before drawing any shape
ctx.fillStyle = "gray";
ctx.fillRect(_data.x, _data.y, _data.width, _data.height);
ctx.fillStyle = "black";
ctx.stroke();
}
$("#k").click(function () {
for (let i = 0; i < data.length; i++) {
const _data = data[i];
ctx.beginPath();
//ctx.shadowColor = "gray";
setTimeout(function () {
if (i != 0) {
ctx.fillStyle = "gray";
ctx.shadowColor = "#0f172b";
ctx.shadowBlur = 0;
ctx.fillRect(
data[i - 1].x,
data[i - 1].y,
data[i - 1].width,
data[i - 1].height
);
ctx.fill();
}
ctx.shadowColor = "white";
ctx.shadowBlur = 25;
ctx.fillStyle = "red";
ctx.fillRect(_data.x, _data.y, _data.width, _data.height);
ctx.fill();
}, 2000 * i);
}
});
body { background: #0f172b; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="NodeList" width="400" height="100"></canvas>
<button id="k">Hello</button>
解决方案
始终在每一帧清除所有并重新绘制所有内容。
然后,您可以定义一个简单的draw()
函数,您将在每一帧调用该函数。此绘图函数应尽可能与状态无关,以便您可以处理更改其外部的状态,并且它将正确呈现。
在这里,在绘制突出显示的形状时设置上下文的样式是一件简单的事情,即只需标记突出显示的形状。
var data = [
{
x: 20,
y: 21,
width: 80,
height: 80,
},
// for horizontal
{
x: 110,
y: 21,
width: 80,
height: 80,
},
{
x: 200,
y: 21,
width: 80,
height: 80,
}
];
var c = document.getElementById("NodeList");
var ctx = c.getContext("2d");
let highlighted = -1; // the index of the shape we want to highlight
// a single function to draw every frame
function draw() {
// clear all
ctx.clearRect(0, 0, c.width, c.height);
// redraw all
for (let i = 0; i < data.length; i++) {
// loop through the data array
const _data = data[i];
const is_highlighted = i === highlighted;
// set the context's style depending on if we are highlighted or not
ctx.fillStyle = is_highlighted ? "red" : "gray";
ctx.shadowColor = is_highlighted ? "white" : "transparent";
ctx.shadowBlur = is_highlighted ? 25 : 0;
// fillRect doesn't need beginPath()
ctx.fillRect(_data.x, _data.y, _data.width, _data.height);
}
}
$("#k").click(function () {
for (let i = 0; i < data.length; i++) {
setTimeout(function () {
highlighted = i;
draw();
}, 2000 * i);
}
});
// initial all gray
// highlighted is currently -1, which points to no shape
draw();
body { background: #0f172b; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="NodeList" width="400" height="100"></canvas>
<button id="k">Hello</button>
推荐阅读
- javascript - 在产品网格视图中为每个产品添加数量字段(ecwid 电子商务)
- php - Vestacp - smpt 电子邮件、mail() 或 swiftmailer 无法使用 php
- google-app-engine - Google App Engine 配额错误,但没有超出配额
- apache-kafka - Kafka 分区日志真的不可变吗?为了使其真正不可变,日志可以与分布式账本集成吗?
- javascript - 有没有办法根据使用路由器做出反应的数组中的单击项目来呈现值?
- android - 检查 espresso 中的对话框(从异步任务创建)
- linux - Docker:go命令上的'go.mod:权限被拒绝'
- macos - 使用 clang++ 使用 SCons 编译 Antlr4 cpp 运行时。结果库给了我未定义的符号(macos)
- python - 2D点之间的最小距离Python 3代码
- python - Python中的while循环没有数字重复并限制在范围内