pixijs 之拖拽功能升级版

时间：2024-03-23 07:42:38

pixijs官方的有拖拽功能的范例；
https://pixijs.io/examples/#/demos/dragging.js

官方的案例是拖一个小图标，锚点也设置为物体的中心了。但是在我们的实际的应用大多情况是拖比较大的物件不是一个小物件，锚点初始在左上角，这时我们需要在pointerdown 事件时记录鼠标与物体锚点的偏差值；

_this.diff = {x:event.data.global.x-_this.x,y:event.data.global.y-_this.y};

另外我们在拖拽时多半会有一个区域的限制，这样我们同样要在 pointerdown事件时记录一个物体初始时的坐标点；

_this.startpos = {x:_this.x,y:_this.y};

并且这个值要一直保留，不能被覆盖；

if(!_this.startpos)_this.startpos = {x:_this.x,y:_this.y};

为了方便我们的演示，我们再绘制两个方框，大框在下面，小框在上面，小框可以拖动但不能拖出大框的范围；以下是这个交互的相关代码：

	/*大框*/
	this.mapbg = new PIXI.Graphics();
    this.mapbg.beginFill(0x000000,.7);
    this.mapbg.drawRect(mapstart.x,mapstart.y,180*this.scale,180*this.scale);
    this.mapbg.endFill();
    this.scene.addChild(this.mapbg)
    this.mapbg.visible = false;

	/*小框*/
	this._mapitem = new PIXI.Graphics();
    this._mapitem.beginFill(0xfcfcfc,.1);
    this._mapitem.drawRect(0,0,120*this.scale,120*this.scale);
    this._mapitem.endFill();
    this.scene.addChild(this._mapitem);
    this._mapitem.x = mapstart.x;
    this._mapitem.y = mapstart.y;
    this._mapitem.interactive = true;
    this._mapitem.visible =false;

下面是事件代码：

	var _mapitemwidth =120;
		this._mapitem.clear();
		this._mapitem.beginFill(0xfcfcfc,.1);
        this._mapitem.drawRect(0,0,_mapitemwidth*this.scale![在这里插入图片描述](https://img-blog.csdnimg.cn/20181127181448938.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25lZWRzcGVlZGJveTIwMTc=,size_16,color_FFFFFF,t_70),_mapitemwidth*this.scale);
        this._mapitem.endFill();


		this._mapitem.on('pointerdown',(event)=>{
        	var _this = event.currentTarget;
        	_this.data = event.data;
        	_this.dragging = true;
        	_this.diff = {x:event.data.global.x-_this.x,y:event.data.global.y-_this.y};
        	if(!_this.startpos)_this.startpos = {x:_this.x,y:_this.y};
        }).on('pointerup',(event)=>{
        	var _this = event.currentTarget;
        	_this.dragging = false;

        }).on('pointerupoutside',(event)=>{
        	var _this = event.currentTarget;
        	_this.dragging = false;

        }).on('pointermove',(event)=>{
        	var _this = event.currentTarget;
			if (_this.dragging) {
		        var newPosition = _this.data.getLocalPosition(_this.parent);
		        _this.x = newPosition.x - _this.diff.x;
		        _this.y = newPosition.y - _this.diff.y;


		        if(_this.y<_this.startpos.y)_this.y = _this.startpos.y;
		        if(_this.y>(_this.startpos.y + (180*this.scale - _mapitemwidth*this.scale))){
		        	_this.y = _this.startpos.y + (180*this.scale - _mapitemwidth*this.scale);
		        }
		        if(_this.x<_this.startpos.x)_this.x = _this.startpos.x;
		        if(_this.x>(_this.startpos.x+ (180*this.scale - _mapitemwidth*this.scale ))){
		        	_this.x = _this.startpos.x + (180*this.scale -_mapitemwidth*this.scale );
		        }
		    }

        })

pixijs 之拖拽功能升级版
这样小框就会一在外面大框限制内拖拽

相关文章