Question

我在过去几个月里正在尝试SVG操作，最近注意到我的应用程序中的旋转和缩放变得越来越多。

请参阅以下注释行＆＃34; var transform＆＃34;。这就是以前的工作方式。现在我意识到我可以在我的应用程序中执行简单的缩放（数字）和旋转（角度）（请参阅非注释的var变换行）。

this.move = function(event) {
    event.preventDefault();
    eventObj = isTouchSupported? event.touches[0] : event;
    var p = widget.services.globalToLocalCoordinates(eventObj.clientX, eventObj.clientY);
    var rdx = morphTarget.rotation.center.x - p.x;
    var rdy = morphTarget.rotation.center.y - p.y;
    var theta = 90 + Math.atan2(rdy, rdx) * 180 / Math.PI;
    var sdx = morphTarget.scale.point.x - p.x;
    var sdy = morphTarget.scale.point.y - p.y;
    var d = Math.sqrt(sdx * sdx + sdy * sdy);
    //var transform = "rotate(" + theta + " " + morphTarget.rotation.center.x + "," + morphTarget.rotation.center.y + ") translate(" + morphTarget.rotation.center.x + "," + morphTarget.rotation.center.y + ") scale(" + d / morphTarget.scale.height + ") translate(" + (-morphTarget.rotation.center.x) + "," + (-morphTarget.rotation.center.y) + ")";
    var transform = "rotate(" + theta +") scale(" + d / morphTarget.scale.height + ")";
    morphTarget.setAttribute("transform", transform);
    //this.target.setAttribute( "transform", transform);
}.bind(this);

所以这个新版本确实有助于简化代码，现在的问题是 - 当转换后我尝试合并矩阵并计算我的形状的顶点的绝对坐标 - 现在表现得很奇怪; /

var matrix = this.transform.baseVal.consolidate().matrix;
        //console.log(matrix, this);
        for (i = 0; i < this.pathPoints.length; i++) {
            var position = this.ownerSVGElement.createSVGPoint();
            position.x = this.pathPoints["p" + i].x;
            position.y = this.pathPoints["p" + i].y;
            position = position.matrixTransform(matrix);
            this.pathPoints["p" + i].x = (position.x).toFixed(2);
            this.pathPoints["p" + i].y = (position.y).toFixed(2);
        };
        this.setAttribute("d", this.constructPath());
        this.setAttribute("transform", "matrix(1 0 0 1 0 0)");

问题：人们通常如何知道如此激烈的代码来破坏Chrome的变化，如果我注意到 - 我如何保护自己免受将来发生的这些事情的影响？

Chrome 57＆amp; SVG代码中断更改

0 个答案: