定义路径和Chrome最近更新后的画布转换

时间:2013-11-13 10:45:10

标签: google-chrome canvas width line transformation

EDIT2:

Chrome版本35中的不受欢迎的行为似乎消失了

/ EDIT2


编辑:

我在澄清问题究竟是什么方面遇到了一些麻烦。但是,定义路径之后的任何转换都不应该影响路径,但现在似乎正在发生这种情况。第二次清理堆栈会弄乱已经定义的路径。

http://jsfiddle.net/HwLvU/4/

/编辑


在过去的8个月里,我一直在制作一些适用于所有5种主流浏览器的绘图程序。好吧,直到今天。

为了防止线宽缩放我在渲染之前清除了转换堆栈,这一直很好用,但除了Chrome之外它仍然可以。从今天开始。

我想知道我正在做的事情是否存在根本性的错误,或者它是否仅仅是Chrome。问题是,在创建路径之后,我应该能够使用转换堆栈做任何我想做的事情,它不应该影响创建的路径的位置,比例或旋转。

我要做的目标是使固定线宽完全独立于形状特定的转换。

// window specific transformation
ctx.setTransform(1, 0, 0, 1, 0, 0); // clear stack
ctx.translate(300, 300);
ctx.scale(1, -1);

// shape specific transformation
ctx.transform(a, b, c, d, e, f);

createPathOfShape(ctx);

// prevent scaling of line width
ctx.setTransform(1, 0, 0, 1, 0, 0); // clear stack

ctx.lineWidth = 1;
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.stroke();

1 个答案:

答案 0 :(得分:1)

我确认你的小提琴在最新的Chrome与最新的IE& FF。

更新:来自whatWG.org: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#drawing-paths-to-the-canvas

  

4.12.4.2.13绘制画布的路径

     

上下文始终具有当前默认路径。只有一个   当前默认路径,它不是绘图状态的一部分

     

当预期路径是当前默认路径时,它不受影响   通过改造。 (这是因为转换已经影响了   构造它时的当前默认路径,所以在它构造时应用它   画也会导致双重转换。)