Hier wird ein Verlauf mit der Maus aufgezogen. Es wird startP durch eine mousedown Eventfunktion und endP durch click, was einem mouseup entspricht definiert und das Rechteck neu gezeichnet. Die Linie kann irgendwo gezogen werden auch außerhalb des Rechtecks.
Beachte auch die Eigenschaft hitArea, welche das Shape bg auf der ganzen Bühne anklickbar macht.
var startP = new createjs.Point(0, 0);
var endP = new createjs.Point(0, 400);
//Anklickbarer Bereich des bg Shape
var hit = new createjs.Shape();
hit.graphics.beginFill("red").drawRect(0, 0, 550,400);
// gezeichnetes Rechteck
var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke("#000000");
g.beginLinearGradientFill(["#000", "#FFF"], [0, 1], startP.x, startP.y, endP.x, endP.y);
g.drawRect(20, 20, 200, 100);
var bg = new createjs.Shape(g);
bg.hitArea = hit;
this.addChildAt(bg);
bg.addEventListener("mousedown", startPoint.bind(this));
bg.addEventListener("click", endPoint.bind(this));
function startPoint(evt) {
startP = this.parent.globalToLocal(evt.stageX, evt.stageY);
console.log("Start " + startP.x + " " + startP.y);
}
function endPoint(evt) {
endP = this.parent.globalToLocal(evt.stageX, evt.stageY);
console.log("Ende " + endP.x + " " + endP.y);
g.clear();
g.beginStroke("#000000");
g.beginLinearGradientFill(["#000", "#FFF"], [0, 1], startP.x, startP.y, endP.x, endP.y);
g.drawRect(20, 20, 200, 100);
bg.graphics = g;
}