Question

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

在我调整canvasPixelRatio的画布后，使用DOMElement时出现问题。

代码类似于：

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

这为我提供了视网膜屏幕上清晰明快的文字。但是，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");

与devicePixelRatio的easeljs domelement问题

1 个答案: