Adobe Animate响应式发布时EaselJS拖拽偏移问题求助

The Root Cause #

When you set up responsive scaling (bidirectional, fit view) and center the stage, Adobe Animate dynamically scales the canvas element to fit the browser window while preserving its aspect ratio. The problem arises because the evt.stageX and evt.stageY values from your pressmove event are tied to the original, unscaled stage dimensions—not the scaled size of the canvas that's actually displayed. This mismatch means the coordinates you're using to position the circle don't align with your mouse's actual position on the scaled canvas, causing that annoying offset.

The Fix #

You need to convert your mouse's position from the browser's client coordinates to the local coordinate system of the scaled stage. Here are two reliable ways to do this:

Method 1: Use CreateJS's globalToLocal (Recommended)

Animate uses CreateJS under the hood, which has built-in methods to handle coordinate conversion. This method automatically accounts for any scaling, centering, or translation applied to the stage:

// Defines "circle" as the object named "circle" in the library.
var circle = this.addChild(new lib.circle());
circle.on("pressmove", function(evt) {
    // Create a point from the mouse's position relative to the browser
    const mousePoint = new createjs.Point(evt.clientX, evt.clientY);
    // Convert that point to the stage's local coordinate system
    const localPoint = evt.target.parent.globalToLocal(mousePoint);
    // Update the circle's position with the corrected coordinates
    evt.target.x = localPoint.x;
    evt.target.y = localPoint.y;
});
circle.on("pressup", function(evt) {
    console.log("up");
});

Method 2: Manually Calculate Scale Ratio

If you prefer a more explicit approach, compute the scale factor between the original stage size and the current canvas size, then adjust your coordinates:

// Defines "circle" as the object named "circle" in the library.
var circle = this.addChild(new lib.circle());
// Grab the original stage dimensions from your project's library properties
const originalStageWidth = lib.properties.width;
const originalStageHeight = lib.properties.height;

circle.on("pressmove", function(evt) {
    // Get the current displayed size of the canvas
    const canvas = this.canvas;
    const scaleX = canvas.clientWidth / originalStageWidth;
    const scaleY = canvas.clientHeight / originalStageHeight;
    
    // Adjust the stage coordinates by dividing by the scale ratio
    evt.target.x = evt.stageX / scaleX;
    evt.target.y = evt.stageY / scaleY;
}, this); // Bind "this" to access the canvas correctly

circle.on("pressup", function(evt) {
    console.log("up");
});

Key Notes #

• The globalToLocal method is more robust because it handles any stage transformations (like rotation or non-uniform scaling, though your settings use uniform scaling).
• Keep your publish settings set to Stage Centered: Bidirectional and Responsive: Bidirectional—these are necessary for the coordinate conversion to work as expected.

内容的提问来源于stack exchange，提问作者Matt Seligman