EaselJS:添加触发mousedown的孩子

时间:2016-11-07 16:45:22

标签: javascript canvas html5-canvas createjs easeljs

我想要的基本功能是......

在舞台上点按(mousedown)以在该位置创建并添加子项。

*编辑:我也尝试解决多点触控,因此可以同时创建多个球。

当你按住时,你可以拖动(按下移动)那个孩子并且它会增长(使用regX / regY / scaleX / scaleY)直到你释放(pressup),此时它会下降(使用一个滴答循环) )。

我有一切工作,但我遇到了障碍,我无法添加一个孩子,并立即注册mousedown而不释放并再次按下。

有没有办法在添加后手动触发mousedown,或者其他一些更有意义的解决方法? dispatchEvent似乎无法正常工作。

这是我的舞台事件监听器和触摸位:

            stage.enableMouseOver(10);
            createjs.Touch.enable(stage, false, false);
            stage.preventSelection = false;
            stage.addEventListener("stagemousedown", spawnsnowball);

这是我的功能。 spawnsnowball one包括displayObject事件听众在绝望中接近,但我能够获得按压和按下工作的唯一方法是再次点击同一个雪球。 releasesnowball现在只是释放它们的所有实例(使用'stagemouseup'侦听器),但是如果我可以触发pressup,那么我会重写它以仅针对 function spawnsnowball(evt){ var ball = new createjs.Bitmap(loader.getResult("snowball")); ball.crossOrigin="Anonymous"; ball.name="ball"; ball.scaleX = 0.5; ball.scaleY = ball.scaleX; ball.regX = ball.image.width/2; ball.regY = ball.image.height/2; ball.x = evt.stageX; ball.y = evt.stageY; ball.type = balltype; ball.holding = 1; ball.velX = 0; ball.velY = 0; ball.addEventListener("pressup",releasesnowball); ball.addEventListener("pressmove",dragsnowball); ball.onPress = function(mouseEvent) {}; stage.addChild(ball); ball.dispatchEvent("mousedown"); ball.dispatchEvent("pressdown"); } function dragsnowball(evt){ evt.target.x = evt.stageX; evt.target.y = evt.stageY; } function releasesnowball(evt){ for(var i=0;i<stage.getNumChildren();i++){ var shape = stage.getChildAt(i); if(shape.type == balltype){ if(shape.holding){ shape.holding = 0; var dX = shape.x - shape.oldX; var dY = shape.y - shape.oldY; if(Math.abs(dY)>8) dY = 8*dY/Math.abs(dY); if(Math.abs(dX)>3) dX = 3*dX/Math.abs(dX); } } } } 事件目标。

import {Injectable} from '@angular/core';
import { Storage, SqlStorage } from 'ionic-angular';

@Injectable()
export class DatabaseService {
  private storage: Storage;

  constructor() {    
    this.storage = new Storage(SqlStorage);
    // we're creating a table called 'devicedata' if it doesn't exist
    this.storage.query('CREATE TABLE IF NOT EXISTS devicedata (id INTEGER PRIMARY KEY AUTOINCREMENT, institutionid TEXT, userimage TEXT, firstname TEXT, lastname TEXT, email TEXT, dob TEXT, gender TEXT, aadhaarno TEXT, nickname TEXT, mobile TEXT, geocode TEXT, location TEXT, ip TEXT, type TEXT, deviceid TEXT, os TEXT, app TEXT, capability TEXT)');
    this.storage.query('CREATE TABLE IF NOT EXISTS seqquestions (id INTEGER PRIMARY KEY AUTOINCREMENT, seqques TEXT, secseq TEXT, status TEXT)');
  }

  saveDeviceData(data) {
    let sql = 'INSERT INTO devicedata (institutionid, app, capability) VALUES (?, ?, ?)';
    // return the query which happens to be a promise.
    return this.storage.query(sql, [data.institutionid, data.app, data.capability]);
  }    

 // get all categories
  getDeviceDetails() {
    return this.storage.query('SELECT institutionid, userimage, firstname, lastname, email, dob, gender, aadhaarno, nickname, mobile, geocode, location, ip, type, deviceid, os, app, capability FROM devicedata');
  }
    updateProfileDetails(obj){
    console.log(JSON.stringify(obj));
      let sql = 'UPDATE devicedata SET nickname = ?, userimage = ?, firstname = ?, lastname = ?, email = ?, dob = ?, gender = ?, aadhaarno = ?';
      return this.storage.query(sql, [obj.nickname, obj.userimage, obj.firstname, obj.lastname, obj.email, obj.dob, obj.gender, obj.aadhaarno]);
    }    
}

1 个答案:

答案 0 :(得分:0)

pressmove事件很特殊,因为它基本上存储了上一个mousedown事件的目标,然后记住pressmovepressup个事件。

这意味着您无法通过强制鼠标事件来伪造事件。从目标调度鼠标事件将无法解决问题。

相反,请考虑手动处理初始拖动。你已经知道你想成为pressmove的目标,所以你可以听取stagemousemove事件,并自己处理:

// Listen to the stagemousemove and manually call the event.
  var initialDrag = stage.on("stagemousemove", function(event) {
    event.target = ball; // Re-target the event so your other method works fine.
    dragsnowball(event);
  });

// When done, remove the move listener.
// The off() method supports a "once" parameter so you don't have to unsubscribe that listener.
  stage.on("stagemouseup", function(event) {
    stage.off("stagemousemove", initialDrag);
  }, null, true); // Fires one time

以下是使用代码作为基础的快速示例:http://jsfiddle.net/3qhmur82/

我还在演示中添加了一些可能有用的评论。

希望有所帮助!