Create a rectangle with mousedown event in Kinetic

问题:

I am trying to create a rectangle shape using KineticJS with mousedown and drag events but not having much luck with it. Has anyone done anything similar?

回答1:

http://jsfiddle.net/AYHSM/6/

var stage = new Kinetic.Stage({
    container: 'container',
    width: 600,
    height: 400
});

var layer = new Kinetic.Layer();
layer.add(new Kinetic.Rect({
    x:0,
    y:0,
    width:600,
    height:400
}));  // this rect will allow us to use mouse events on the layer. There's probably a better way to do this, but I don't know it.
stage.add(layer);
var rect, down = false; // down is a flag to know whether or not the mouse button is down so that we only resize the new rect when it is down.

layer.on("mousedown", function(e) {

    down = true;
    var r = Math.round(Math.random()*255),
        g = Math.round(Math.random()*255),
        b = Math.round(Math.random()*255);
    rect = new Kinetic.Rect({
        x: e.layerX,
        y: e.layerY,
        width: 11,
        height: 1,
        fill: 'rgb('+r+','+g+','+b+')',
        stroke: 'black',
        strokeWidth: 4
    });
    layer.add(rect);
});

layer.on("mousemove", function(e) {
    if (!down) return;

    var p = rect.attrs;

    rect.setWidth(e.layerX - p.x);
    rect.setHeight(e.layerY - p.y);
    layer.draw();
});

layer.on("mouseup", function(e) {
    down = false;
});​