Konvajs：在其中一个孩子身上创建一个带有一些约束的可拖动区域

我正在用Konva创建一个时间轴，整个时间轴（舞台）可以在各个方向上拖动，但我有一个轴，其中包含时间轴（Konva group）的所有年份，我想限制它的移动，以便它只能水平移动

我不能使用dragBoundFunc，因为它会限制时间线所有节点上的移动

我尝试使用dragmove事件更改元素的位置：

stage.on("dragmove", function(evt) {
  xaxis.y(0);
});

但xaxis在拖拽舞台的同时仍然向各个方向移动

---

我也可以为轴和时间轴本身使用不同的可拖动层，但是当我拖动轴时，它不会移动时间轴，如果我移动时间轴，它也不会移动时间轴。

不完全清楚您在问什么，但我假设您希望限制时间轴的拖动，以便提供良好的用户体验。请参阅下面的工作代码段。大部分代码是时间线的设置。重要的是

包括一个覆盖整个时间线的矩形，该时间线不透明度为零，正在侦听鼠标事件

为层提供一个dragBoundFunc，该函数返回一个对象{x:val，y:val}，其中x被压缩以阻止用户水平拖动，并且y不允许更改。如果你认为矩形和舞台是矩形，那么数学就不难理解了。如果时间轴是垂直的，则交换x&y行为

var stageWidth=800，
timeFrom=1960，
timeTo=2060，
范围=时间到-时间从，
时间线宽度=1000；
yearWidth=时间线宽度/范围，
事件=[{
日期：1964年，
描述：“出生”
},
{
日期：1968年，
描述：“幼儿学校”
},
{
日期：1975年，
描述：“中学”
},
{
日期：1981年，
描述：“中六”
},
{
日期：1983年，
描述：“大学”
},
{
日期：1986年，
描述：“学位，进入IT职业”
},
{
日期：1990年，
描述：“婚姻#1”
},
{
日期：1998年，
描述：“婚姻2”
},
{
日期：1999年，
描述：“儿子出生”
},
{
日期：2025年，
描述：“退休了？”
},
{
日期：2044年，
描述：“进入Duncodin-IT员工退休之家”
},
{
日期：2054，
描述：“星尘”
}
]
函数设置（）{
//搭建舞台和造型
舞台=新康瓦舞台({
集装箱：“konva stage”，
宽度：台阶宽度，
身高：500
});
层=新Konva.layer({
真的，
//dragBoundFunc返回一个对象{x:val，y:val}，其中x被压缩为停止
//用户拖出视线，y不允许更改。
dragBoundFunc:函数（位置）{
返回{
x:函数（）{
retX=位置x；
如果（retX>20）{
retX=20；
}否则如果（retX<（阶段宽度-（时间线宽度+50）））{
retX=分段宽度-（时间线宽度+50）；
}
返回retX；
}(),
y：这个。绝对位置（）
};
}
});
阶段。添加（层）；
//添加时间线
var timeLine=new Konva.Rect({
x:0,，
y:245，
身高：10，
宽度：时间线宽度，
填充：“洋红”，
听：错
});
添加图层（时间线）
对于（变量i=0，max=events.length；i

.konva舞台{
宽度：100%；
高度：100%；

拖动时间线

这是一个功能稍强的版本，允许垂直拖动事件层，同时保持时间线轴可见以供参考。它使用两个层-一个层作为包含时间线和网格的背景，另一个层显示事件

这里的关键技术是使用可拖动事件层上的dragMove事件监听器水平而非垂直地同步移动背景层。同时，事件层还受到dragBound函数的约束，以停止UX

一个改进是将剪辑添加到事件层，以便在向下拖动时不会模糊时间线

var stageWidth=800，
舞台高度=300，
timeFrom=1960，
timeTo=2060，
时间范围=时间到-时间从，
timeLineWidth=1000，
时间步长=20，//超过100年=间隔5年
timeInt=时间范围/时间步长，
timeLineStep=timeLineWidth/timeSteps，
yearWidth=时间线宽度/时间范围，
绘图高度=500，
事件=[{
日期：1964年，
描述：“出生”，
地区：10
},
{
日期：1966年，
描述：“英格兰队赢得世界杯——还在庆祝！”，
地区：20
},    
{
日期：1968年，
描述：“幼儿学校”，
地区：30
},
{
日期：1975年，
描述：“中学”，
地区：50
},
{
日期：1981年，
描述：“中六”，
地区：7
},
{