Question

我正在尝试构建一个益智游戏，我可以动态地更改游戏中使用的图像。我使用illustcript插件创建了各种拼图形状，非常棒。 .p（）中的长代码包含有关矢量形状以及x和y位置的所有信息。然后，beginBitmapFill（）函数创建的形状包含该形状的图像中的信息。缺点是注册点是0,0这意味着在拖动拼图时总是存在偏移。看看我的小提琴，看看我的意思。我已经注释掉了beginBitmapFill行，但取消注释以查看它的实际效果。任何人对如何做到这一点都有任何想法？

g = new createjs.Graphics();
s = new createjs.Shape(g);
s.graphics.beginBitmapFill(image).s().p("AAAAAYEEAAEEAAEEAAYAAAAhGDIBGA8YAyA8CChuAyAyYA8A8AAB4g8A8YgyAyiChugyA8YhGA8BGDSAAAAYAAAAjSA8g8g8Yg8g8Buh4gyg8Yg8gyh4AAg8AyYgyA8BuB4g8A8Yg8A8jSg8AAAAYAAkEAAkEAAj6");
s.name = key;
container.addChild(s);

http://jsfiddle.net/non_tech_guy/1yyn4904/

Answer 1

问题来自形状位置。形状在预定义的位置绘制，其大小均为310px。因此，当您将鼠标事件位置分配给目标对象时，它将远离指针。

为了使它适用于当前的实现，我为每个形状创建了一个位置引用。

positionReference = {};
SHAPE_SIZE=310;
var yRelCount = 1;

for(var i = 1; i< 17;i++) {
    xRel = i % 4 || 4;
    yRel = yRelCount;
    if (xRel === 4) {
      yRelCount++;   
    }
    positionReference['p'+i] = {
        x: xRel * SHAPE_SIZE / 4,
        y: yRel * SHAPE_SIZE / 4
    }
}

positionReference是一个对象，其形状为name作为关键字（例如：p1，p2，p3，...），位置x和y为值。

稍后在拖动事件中，利用位置参考使形状坚持鼠标指针

function pressMove(evt){
    console.log('move')
    var target = evt.target;
    var ref = positionReference[target.name];
    target.x= stage.mouseX-ref.x+(SHAPE_SIZE/8);
    target.y= stage.mouseY-ref.y+(SHAPE_SIZE/8);
}

你可能会发现我还添加了SHAPE_SIZE/8，这样做的目的是调整位置，使鼠标指针出现在形状的中间。

工作示例：http://jsfiddle.net/1yyn4904/1/

CreateJS - 益智游戏

1 个答案: