新人求教拖拽连线,感谢

Creator 2.x
#1

creator想写一个连线效果,上下方连线,没有拖动到位就松手线会消失,拖动到指点位置附近会出现类似吸附的效果,请问要用什么方法来写,我现在用的方法是在节点上弄个矩形,然后拖动的时候改变矩形的高来模拟画线效果,可是不会计算夹角改变角度,矩形只能像一个方向延伸…一定有什么更好的方法吧,求大神指导

Snip20171019_2.png883×659 557 KB

2赞
#2

根据两个点就可以生成一条直线，直线可以使用一个小小的Sprite来做，设置成9宫模式，我这里是改变他的宽度，让它变长

updateLine() {
        //this._start为起始点，this._end为终点就你touchmove时的当前点
        this.node.position = this._start;
        let dt = cc.pSub(this._start, this._end);
        //计算角度
        let radian = Math.atan2(dt.x, dt.y); 
        let rotation = (180 * radian / Math.PI + 90) % 360;
        //旋转线条
        this.node.rotation = rotation;
        //设置宽度，我这里是用宽度改变的线条长度
        this.node.width =  cc.pDistance(this._start, this._end)
}

线条的锚点设置

1赞
#3

wa,太感谢了,我马上试一下

#4

不是可以直接画线条吗

#5

onLoad: function () {
this.node.on(cc.Node.EventType.TOUCH_START, function(t) {
this._start = t.getLocation();
t.stopPropagationImmediate();
}, this);

我在touch_start里获取位置赋值给this_start,然后一拖,没反应,我使劲往下拖,这货就从屏幕外头怼进来了.应该是子级父级坐标转换啥的有问题吧,我在读读文档

#6

touch的位置和节点的位置还是不一样,我现在用固定值给start,想要的效果可以实现了,吸附那个效果我想是不是判断线的矩形和要连线的矩形有没有相交,相交的话就给一个end值完成连线,感谢指导:grin:

#7

touch.getLocation()是世界坐标，你需要将他转换为当前节点坐标
例如是你当前的线条精灵

//将touch的世界坐标，转换为当前节点的父节点中的坐标
node.position = node.parent.convertToNodeSpaceAR(t.getLocation());

吸附效果可以将当前的touch位置与你的终点位置，做一个距离计算，小于这个距离就强行将他设置为终点

#8

对对对,就差在这个转换了,谢谢

#9

您好有demo可以发下吗？

#10

:2: