leaferjs
关于Sky层的Frame和ground层的Frame，透明Frame，点击无法穿透到背景层
const app = new App({ view: scrollContainer, mobile: true, editor: {}, tree: {}, sky: {}, ground: {}, move: { drag: "auto" }, pointer: { hover: false, through: true }, }); //tree层的Frame！ const treeFrame = new Frame({ x: 15 y: 60 width: 700 height: 850 fill: "rgba(223, 165, 165, 0)", // hitFill: "node", // 这个有问题，其他三个属性都无法实现 }); //ground层的Frame！ const groundFrame = new Frame({ x: 15 y: 60 width: 700 height: 850 fill: "rgba(236, 172, 172, 1)", });
const rect1 = Rect.one(
{
editable: true,
fill: "#FEB027",
cornerRadius: [20, 0, 0, 20],
hitBox: true,
},
100,
100
);
const rect2 = Rect.one(
{
editable: true,
fill: "#d34b22ff",
cornerRadius: [0, 20, 20, 0],
},
300,
100
);
const text = new Text({
fill: "black",
text: "canvas区域竖排和横排",
x: 100,
y: 100,
padding: 10,
boxStyle: {
fill: "#32cd79",
stroke: "black",
cornerRadius: 2,
},
editable: true,
});
app.tree.add(treeFrame);
app.ground.add(groundFrame);
groundFrame.add(rect2);
treeFrame.add(text);
treeFrame.add(rect1);
//问题如下，treeFrame 中的 hitFill: "node"开启以后，当tree层的元素拖拽松手，相交Frame，下次选不中了，而且是tree层全部的元素无法选中。设置hitFill为别的属性值，背景层的Frame里面的元素无法选中。感谢解答
两个Frame里都有交互内容，且相交重合了，这个从节点设计上就会带来交互问题（底层也不太支持），除非ground层里不放元素。
建议先了解清楚元素特性，再根据特性去使用。
这种交互模式下，拖拽元素至边缘后选不中，应该是产生bug了，后面会修复一下
// #App结构 - 图形编辑器 [editor]
import { App, Frame, Rect, Text } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({
view: window,
mobile: true,
editor: {},
tree: {},
sky: {},
ground: {},
move: { drag: "auto" },
pointer: { hover: false, through: true },
});
//tree层的Frame！
const treeFrame = new Frame({
x: 15,
y: 60,
width: 700,
height: 850,
fill: "rgba(23, 165, 165, 0)",
hitFill: "none", // 这个有问题，其他三个属性都无法实现
});
//ground层的Frame！
const groundFrame = new Frame({
x: 15,
y: 60,
width: 700,
height: 850,
fill: "rgba(236, 172, 172, 1)",
});
const rect1 = Rect.one(
{
editable: true,
fill: "#FEB027",
cornerRadius: [20, 0, 0, 20],
hitBox: true,
},
100,
100
);
const rect2 = Rect.one(
{
editable: true,
fill: "#d34b22ff",
cornerRadius: [0, 20, 20, 0],
},
300,
100
);
const text = new Text({
fill: "black",
text: "canvas区域竖排和横排",
x: 100,
y: 100,
padding: 10,
boxStyle: {
fill: "#32cd79",
stroke: "black",
cornerRadius: 2,
},
editable: true,
});
app.tree.add(treeFrame);
app.ground.add(groundFrame);
groundFrame.add(rect2);
treeFrame.add(text);
treeFrame.add(rect1);