The issue has been closed

求助：自定义节点动画问题 #5525

MinorN posted onGitHub

问题描述

我需要自定义图节点，往节点外部添加一个圈将节点包裹（类似 border），并且希望在 hover 该节点的时候，border 能够有动画类似收缩，我的做法是：在 afterDraw 之中添加一个 circle ，比原有的circle半径大，然后 setState 去获取来改变半径，但是这样子改变的是内部圆的半径

重现链接

none

重现步骤

none

预期行为

G6.registerNode(
        "custom-line-circle",
        {
          afterDraw(cfg, group) {
            let r = cfg.size / 2;
            if (isNaN(r)) {
              r = cfg.size[0] / 2;
            }
            // 第一个背景圆
            const back = group.addShape("circle", {
              attrs: {
                x: 0,
                y: 0,
                r: r + 5,
                fill: null,
                stroke: "red",
              },

              // must be assigned in G6 3.3 and later versions. it can be any value you want
              name: "circle-shape1",
            });
          },
          setState(name, value, item) {
            const shape = item.get("children");
            console.log(shape);
            console.log(item);
            // const r = item.getModel().size / 2;
            // if (name === "hover") {
            //   if (value) {
            //     shape.animate(
            //       {
            //         r: r + 2,
            //       },
            //       {
            //         repeat: true,
            //         duration: 1000,
            //         easing: "easeCubic",
            //         delay: 0, // 无延迟
            //       }
            //     );
            //   } else {
            //     shape.stopAnimate();
            //   }
            // }
          },
        },
        "circle"
      );

平台

操作系统: [macOS, Windows, Linux, React Native ...]
网页浏览器: [Google Chrome, Safari, Firefox]
G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

已经完成了，但是出现了第二个问题，我想要在上面显示文字，但是显示不出来，怀疑是层级问题

 const nodeWithLine = G6.registerNode(
        "custom-line-circle",
        {
          draw: (cfg, group) => {
            let r = cfg.size / 2;

            const keyShape = group.addShape("circle", {
              attrs: {
                zIndex: 1,
                r: r + 10,
                fill: null,
                stroke: cfg.fill || "red",
              },
              name: "outer-circle",
              draggable: true,
            });
            group.addShape("circle", {
              attrs: {
                zIndex: 1,
                r: r,
                fill: cfg.fill || "red",
                stroke: null,
              },
              name: "inner-circle",
              draggable: true,
            });

            if (cfg.label) {
              const label = group.addShape("text", {
                attr: {
                  zIndex: 2,
                  x: 0,
                  y: 0,
                  textAlign: "center",
                  textBaseline: "middle",
                  text: cfg.label,
                  fill: "#fff",
                },
                name: "text-shape",
                draggable: true,
              });
            }

            return keyShape;
          },
          // afterDraw(cfg, group) {
          //   let r = cfg.size / 2;
          //   if (isNaN(r)) {
          //     r = cfg.size[0] / 2;
          //   }
          //   // 第一个背景圆
          //   const back = group.addShape("circle", {
          //     attrs: {
          //       x: 0,
          //       y: 0,
          //       r: r + 5,
          //       fill: null,
          //       stroke: "red",
          //     },

          //     // must be assigned in G6 3.3 and later versions. it can be any value you want
          //     name: "circle-shape1",
          //   });
          // },
          setState(name, value, item) {
            const shape = item.get("keyShape");
            const r = item.getModel().size / 2;
            if (name === "hover") {
              if (value) {
                shape.animate(
                  {
                    r: r + 5,
                  },
                  {
                    repeat: false,
                    duration: 500,
                    easing: "easeLinear",
                    delay: 0, // 无延迟
                  }
                );
              } else {
                shape.animate(
                  {
                    r: r + 10,
                  },
                  {
                    repeat: false,
                    duration: 500,
                    easing: "easeLinear",
                    delay: 0, // 无延迟
                  }
                );
              }
            }
          },
        },
        "circle"
      );

posted by MinorN about 1 year ago

已经解决了

posted by MinorN about 1 year ago

Fund this Issue

$0.00

Funded

Pull requests

求助：自定义节点动画问题 #5525

问题描述

重现链接

重现步骤

预期行为

平台

屏幕截图或视频（可选）

补充说明（可选）

Company

Community

Support

Connect