有没有办法固定一个(或多个)元素（Node）。即这个Node在设置了drag-element、zoom-canvas后，在画布拖动或者缩放的时候都不会改变位置和大小，同时该元素也应该禁止拖动

[qianfeii]

关于缩放时固定位置和大小

目前使用了fix-element-size对单个元素固定大小，关于固定位置想到的是缩放后计算固定的视口位置得到画布位置后设置画布的xy，但是找不到能用的生命周期在缩放渲染完成后设置node的x y。onFinish也是发生在缩放元素渲染完成之前。事件监听里的图表生命周期事件里也没有找到能用的时机让我重新根据视口位置设置画布位置。
目前的配置

{
            type: "zoom-canvas",
            key: "zoom-canvas-1", // 为交互指定标识符，方便动态更新
            onFinish: (e) => {
              console.log(e, "++++++!!!!!!!!!!!!!");
              // 视口坐标系转化，该元素视口位置固定为 0，0
              const canvasPoint = graph.getCanvasByViewport([0, 0]);
              console.log("-----", canvasPoint);
              graph.updateNodeData([
                { id: "bgac", style: { x: canvasPoint.x, y: canvasPoint.y } },
              ]);
            },
          },
          {
            key: "fix-element-size",
            type: "fix-element-size",
            nodeFilter: (node) => {
              console.log(node, "-----");
              // 该元素缩放时固定大小
              return node.id === "bgac";
            },
            onFinish: () => {
              console.log("3333333333333333");
            },
          },

关于禁用拖拽

已在enable上针对的配置。是否元素上有可以配置的方式

{ type: "drag-element", enable: (e) => e.target.id !== "bgac" },

[yvonneyx]

没太理解，请具体描述一下

[qianfeii]

感谢回复。

大致场景如图。画布被分为上下两个区域且各自有地图，上方区域要求固定不动。无法拖拽及缩放。下方区域正常拖拽和缩放。
所以目前我是创建了两个图片node调整大小和位置后作为底图，zIndex设置为0，然后添加一些其他nodes和edges。
但是关于上方区域固定遇到一些问题。
上方区域禁止拖拽可以实现。
但是上方区域在画布缩放时，也会跟着大小被缩放和位置改变。
关于缩放时的大小改变可以使用"fix-element-size"进行固定。但是缩放时的图片的位置改变无法解决。
缩放前

缩放后

关于缩放时位置的改变不知道有什么思路可以提供吗？
我目前的思路是在缩放后根据视口坐标[0, 0]计算出画布坐标设置给这个底图node，但是没有找到合适的时机。我在下方的onFinish回掉和nodeFilter参数里都尝试过。都不能把上方底图的元素设置会视口[0, 0]的位置。其他事件监听里的生命周期函数我也都试过也不行。

{
            type: "zoom-canvas",
            key: "zoom-canvas-1", // 为交互指定标识符，方便动态更新
            onFinish: (e) => {
              console.log(e, "++++++!!!!!!!!!!!!!");
              // 视口坐标系转化，该元素视口位置固定为 0，0
              const canvasPoint = graph.getCanvasByViewport([0, 0]);
              console.log("-----", canvasPoint);
              graph.updateNodeData([
                { id: "bgac", style: { x: canvasPoint.x, y: canvasPoint.y } },
              ]);
            },
          },
          {
            key: "fix-element-size",
            type: "fix-element-size",
            nodeFilter: (node) => {
              console.log(node, "-----");
              // 该元素缩放时固定大小
              return node.id === "bgac";
            },
          },

另外还有一个问题不知道能不能帮忙给个思路。就是下方底图的node和底图上的元素如A1 A2这两个node的联动。想要底图node移动时A1 A2也跟着移动，保持相对位置不变。不知道combo是不是可以实现（主要不知道combo能不能设置图片）

[qianfeii]

感谢回复。

大致场景如图。画布被分为上下两个区域且各自有地图，上方区域要求固定不动。无法拖拽及缩放。下方区域正常拖拽和缩放。
所以目前我是创建了两个图片node调整大小和位置后作为底图，zIndex设置为0，然后添加一些其他nodes和edges。
但是关于上方区域固定遇到一些问题。
上方区域禁止拖拽可以实现。
但是上方区域在画布缩放时，也会跟着大小被缩放和位置改变。
关于缩放时的大小改变可以使用"fix-element-size"进行固定。但是缩放时的图片的位置改变无法解决。
缩放前

缩放后

关于缩放时位置的改变不知道有什么思路可以提供吗？
我目前的思路是在缩放后根据视口坐标[0, 0]计算出画布坐标设置给这个底图node，但是没有找到合适的时机。我在下方的onFinish回掉和nodeFilter参数里都尝试过。都不能把上方底图的元素设置会视口[0, 0]的位置。其他事件监听里的生命周期函数我也都试过也不行。

{
            type: "zoom-canvas",
            key: "zoom-canvas-1", // 为交互指定标识符，方便动态更新
            onFinish: (e) => {
              console.log(e, "++++++!!!!!!!!!!!!!");
              // 视口坐标系转化，该元素视口位置固定为 0，0
              const canvasPoint = graph.getCanvasByViewport([0, 0]);
              console.log("-----", canvasPoint);
              graph.updateNodeData([
                { id: "bgac", style: { x: canvasPoint.x, y: canvasPoint.y } },
              ]);
            },
          },
          {
            key: "fix-element-size",
            type: "fix-element-size",
            nodeFilter: (node) => {
              console.log(node, "-----");
              // 该元素缩放时固定大小
              return node.id === "bgac";
            },
          },

另外还有一个问题不知道能不能帮忙给个思路。就是下方底图的node和底图上的元素如A1 A2这两个node的联动。想要底图node移动时A1 A2也跟着移动，保持相对位置不变。不知道combo是不是可以实现（主要不知道combo能不能设置图片）

[qianfeii]

@yvonneyx 感谢查看。请问关于这个有什么思路吗？感谢

[yvonneyx]

现在是节点大小能固定但是位置有偏移嘛？需要确认一下节点的原点在中心而不是左上角。

另外底图 node 移动时要确保子节点相对位置不变，简单一点用 rect combo 也能做，核心思路就是在拖拽底图时同步更新子节点位置，可以参考 combo 的实现方式