与 devicePixelRatio 的easeljs domelement 问题

Question

问题已在此处发布。 http://community.createjs.com/discussions/easeljs/22315-domelement-remove-transformsscale

在为 devicePixelRatio 调整画布后使用 DOMElement 时出现问题。

代码看起来像：

stage.canvas.width = width * scalingFactor
stage.canvas.height = height * scalingFactor
stage.canvas.style.width = width
stage.canvas.style.height = height

这让我在 Retina 屏幕上获得了清晰的文本。 但是，DOMElements 的位置现在是关闭的。

有什么想法吗？这是一个已知错误吗？

干杯，

马特。

Answer 1

我最终扩展了默认的 DOMElement 类似的东西：

var DOMElement = function(htmlElement) {
    this.DOMElement_constructor(htmlElement);

    this.globalScale = CanvasUtils.getScale();

    this.acceleratedCompositing = Modernizr.csstransforms3d;
};
var p = createjs.extend(DOMElement, createjs.DOMElement);

/**
 * @override
 *
 * Overrides default createjs DOMElement.
 *
 * overrides _handleDrawEnd
 * Sets 3d transform (translateZ)
 */
p._handleDrawEnd = function(evt) {
    var o = this.htmlElement;
    if (!o) { return; }
    var style = o.style;

    var props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix;

    // use display instead of visibility
    var display = props.visible ? '' : 'none';
    if (display != style.display) { style.display = display; }
    if (!props.visible) { return; }

    var oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix;
    var n = 10000; // precision

    if (!oldMtx || !oldMtx.equals(mtx)) {
        var str = '';

        if(this.acceleratedCompositing) {
            str += 'translateZ(0)';
        }

        str += "matrix(" + (mtx.a*n|0)/n / this.globalScale +","+ (mtx.b*n|0)/n +","+ (mtx.c*n|0)/n +","+ (mtx.d * n|0)/n / this.globalScale+","+ (mtx.tx + 0.5|0) / this.globalScale;

        style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +","+ (mtx.ty+0.5|0) / this.globalScale +")";

        style.MozTransform = str +"px,"+ (mtx.ty+0.5|0) / this.globalScale +"px)";

        if (!oldProps) { oldProps = this._oldProps = new createjs.DisplayProps(true, NaN); }
        oldProps.matrix.copy(mtx);
    }

    if (oldProps.alpha != props.alpha) {
        style.opacity = ""+(props.alpha*n|0)/n;
        oldProps.alpha = props.alpha;
    }
};

createjs.DOMElement = createjs.promote(DOMElement, "DOMElement");