Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
sxychenjing
engine
提交
8f89bac4
E
engine
项目概览
sxychenjing
/
engine
与 Fork 源项目一致
从无法访问的项目Fork
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
E
engine
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
8f89bac4
编写于
2月 05, 2020
作者:
F
Ferhat
提交者:
GitHub
2月 05, 2020
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
[web] Fixes incorrect transform when context save and transforms are deferred. (#16412)
* Fix transform order in clipStack replay
上级
31bf3e11
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
146 addition
and
17 deletion
+146
-17
lib/web_ui/dev/goldens_lock.yaml
lib/web_ui/dev/goldens_lock.yaml
+1
-1
lib/web_ui/lib/src/engine/canvas_pool.dart
lib/web_ui/lib/src/engine/canvas_pool.dart
+45
-16
lib/web_ui/test/golden_tests/engine/canvas_context_test.dart
lib/web_ui/test/golden_tests/engine/canvas_context_test.dart
+100
-0
未找到文件。
lib/web_ui/dev/goldens_lock.yaml
浏览文件 @
8f89bac4
repository
:
https://github.com/flutter/goldens.git
revision
:
43254f4abddc2542ece540f222545970caf12908
revision
:
1637835646ef187884ceeb59011d70c463429876
lib/web_ui/lib/src/engine/canvas_pool.dart
浏览文件 @
8f89bac4
...
...
@@ -101,11 +101,7 @@ class _CanvasPool extends _SaveStackTracking {
_rootElement
.
append
(
_canvas
);
_context
=
_canvas
.
context2D
;
_contextHandle
=
ContextStateHandle
(
_context
);
_initializeViewport
();
if
(
requiresClearRect
)
{
// Now that the context is reset, clear old contents.
_context
.
clearRect
(
0
,
0
,
_widthInBitmapPixels
,
_heightInBitmapPixels
);
}
_initializeViewport
(
requiresClearRect
);
_replayClipStack
();
}
...
...
@@ -136,20 +132,34 @@ class _CanvasPool extends _SaveStackTracking {
translate
(
transform
.
dx
,
transform
.
dy
);
}
int
_replaySingleSaveEntry
(
int
clipDepth
,
Matrix4
transform
,
List
<
_SaveClipEntry
>
clipStack
)
{
int
_replaySingleSaveEntry
(
int
clipDepth
,
Matrix4
prevTransform
,
Matrix4
transform
,
List
<
_SaveClipEntry
>
clipStack
)
{
final
html
.
CanvasRenderingContext2D
ctx
=
_context
;
if
(!
transform
.
isIdentity
())
{
final
double
ratio
=
EngineWindow
.
browserDevicePixelRatio
;
ctx
.
setTransform
(
ratio
,
0
,
0
,
ratio
,
0
,
0
);
ctx
.
transform
(
transform
[
0
],
transform
[
1
],
transform
[
4
],
transform
[
5
],
transform
[
12
],
transform
[
13
]);
}
if
(
clipStack
!=
null
)
{
for
(
int
clipCount
=
clipStack
.
length
;
clipDepth
<
clipCount
;
clipDepth
++)
{
_SaveClipEntry
clipEntry
=
clipStack
[
clipDepth
];
Matrix4
clipTimeTransform
=
clipEntry
.
currentTransform
;
// If transform for entry recording change since last element, update.
// Comparing only matrix3 elements since Canvas API restricted.
if
(
clipTimeTransform
[
0
]
!=
prevTransform
[
0
]
||
clipTimeTransform
[
1
]
!=
prevTransform
[
1
]
||
clipTimeTransform
[
4
]
!=
prevTransform
[
4
]
||
clipTimeTransform
[
5
]
!=
prevTransform
[
5
]
||
clipTimeTransform
[
12
]
!=
prevTransform
[
12
]
||
clipTimeTransform
[
13
]
!=
prevTransform
[
13
])
{
final
double
ratio
=
EngineWindow
.
browserDevicePixelRatio
;
ctx
.
setTransform
(
ratio
,
0
,
0
,
ratio
,
0
,
0
);
ctx
.
transform
(
clipTimeTransform
[
0
],
clipTimeTransform
[
1
],
clipTimeTransform
[
4
],
clipTimeTransform
[
5
],
clipTimeTransform
[
12
],
clipTimeTransform
[
13
]);
prevTransform
=
clipTimeTransform
;
}
if
(
clipEntry
.
rect
!=
null
)
{
_clipRect
(
ctx
,
clipEntry
.
rect
);
}
else
if
(
clipEntry
.
rrect
!=
null
)
{
...
...
@@ -160,6 +170,19 @@ class _CanvasPool extends _SaveStackTracking {
}
}
}
// If transform was changed between last clip operation and save call,
// update.
if
(
transform
[
0
]
!=
prevTransform
[
0
]
||
transform
[
1
]
!=
prevTransform
[
1
]
||
transform
[
4
]
!=
prevTransform
[
4
]
||
transform
[
5
]
!=
prevTransform
[
5
]
||
transform
[
12
]
!=
prevTransform
[
12
]
||
transform
[
13
]
!=
prevTransform
[
13
])
{
final
double
ratio
=
EngineWindow
.
browserDevicePixelRatio
;
ctx
.
setTransform
(
ratio
,
0
,
0
,
ratio
,
0
,
0
);
ctx
.
transform
(
transform
[
0
],
transform
[
1
],
transform
[
4
],
transform
[
5
],
transform
[
12
],
transform
[
13
]);
}
return
clipDepth
;
}
...
...
@@ -167,16 +190,19 @@ class _CanvasPool extends _SaveStackTracking {
// Replay save/clip stack on this canvas now.
html
.
CanvasRenderingContext2D
ctx
=
_context
;
int
clipDepth
=
0
;
Matrix4
prevTransform
=
Matrix4
.
identity
();
for
(
int
saveStackIndex
=
0
,
len
=
_saveStack
.
length
;
saveStackIndex
<
len
;
saveStackIndex
++)
{
_SaveStackEntry
saveEntry
=
_saveStack
[
saveStackIndex
];
clipDepth
=
_replaySingleSaveEntry
(
clipDepth
,
saveEntry
.
transform
,
saveEntry
.
clipStack
);
clipDepth
,
prevTransform
,
saveEntry
.
transform
,
saveEntry
.
clipStack
);
prevTransform
=
saveEntry
.
transform
;
ctx
.
save
();
++
_saveContextCount
;
}
_replaySingleSaveEntry
(
clipDepth
,
_currentTransform
,
_clipStack
);
_replaySingleSaveEntry
(
clipDepth
,
prevTransform
,
_currentTransform
,
_clipStack
);
}
// Marks this pool for reuse.
...
...
@@ -216,7 +242,7 @@ class _CanvasPool extends _SaveStackTracking {
/// Configures the canvas such that its coordinate system follows the scene's
/// coordinate system, and the pixel ratio is applied such that CSS pixels are
/// translated to bitmap pixels.
void
_initializeViewport
()
{
void
_initializeViewport
(
bool
clearCanvas
)
{
html
.
CanvasRenderingContext2D
ctx
=
context
;
// Save the canvas state with top-level transforms so we can undo
// any clips later when we reuse the canvas.
...
...
@@ -226,6 +252,9 @@ class _CanvasPool extends _SaveStackTracking {
// We always start with identity transform because the surrounding transform
// is applied on the DOM elements.
ctx
.
setTransform
(
1
,
0
,
0
,
1
,
0
,
0
);
if
(
clearCanvas
)
{
ctx
.
clearRect
(
0
,
0
,
_widthInBitmapPixels
,
_heightInBitmapPixels
);
}
// This scale makes sure that 1 CSS pixel is translated to the correct
// number of bitmap pixels.
...
...
lib/web_ui/test/golden_tests/engine/canvas_context_test.dart
0 → 100644
浏览文件 @
8f89bac4
// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import
'dart:html'
as
html
;
import
'dart:js_util'
as
js_util
;
import
'package:ui/ui.dart'
hide
TextStyle
;
import
'package:ui/src/engine.dart'
as
engine
;
import
'package:test/test.dart'
;
import
'package:web_engine_tester/golden_tester.dart'
;
/// Tests context save/restore.
void
main
(
)
async
{
const
double
screenWidth
=
600.0
;
const
double
screenHeight
=
800.0
;
const
Rect
screenRect
=
Rect
.
fromLTWH
(
0
,
0
,
screenWidth
,
screenHeight
);
// Commit a recording canvas to a bitmap, and compare with the expected
Future
<
void
>
_checkScreenshot
(
engine
.
RecordingCanvas
rc
,
String
fileName
,
{
Rect
region
=
const
Rect
.
fromLTWH
(
0
,
0
,
500
,
500
)})
async
{
final
engine
.
EngineCanvas
engineCanvas
=
engine
.
BitmapCanvas
(
screenRect
);
rc
.
apply
(
engineCanvas
);
// Wrap in <flt-scene> so that our CSS selectors kick in.
final
html
.
Element
sceneElement
=
html
.
Element
.
tag
(
'flt-scene'
);
try
{
sceneElement
.
append
(
engineCanvas
.
rootElement
);
html
.
document
.
body
.
append
(
sceneElement
);
await
matchGoldenFile
(
'
$fileName
.png'
,
region:
region
,
maxDiffRate:
0.1
);
}
finally
{
// The page is reused across tests, so remove the element after taking the
// Scuba screenshot.
sceneElement
.
remove
();
}
}
setUp
(()
async
{
debugEmulateFlutterTesterEnvironment
=
true
;
await
webOnlyInitializePlatform
();
webOnlyFontCollection
.
debugRegisterTestFonts
();
await
webOnlyFontCollection
.
ensureFontsLoaded
();
});
// Regression test for https://github.com/flutter/flutter/issues/49429
// Should clip with correct transform.
test
(
'Clips image with oval clip path'
,
()
async
{
final
engine
.
RecordingCanvas
rc
=
engine
.
RecordingCanvas
(
const
Rect
.
fromLTRB
(
0
,
0
,
400
,
300
));
final
Paint
paint
=
Paint
()
..
color
=
Color
(
0xFF00FF00
)
..
style
=
PaintingStyle
.
fill
;
rc
.
save
();
final
Path
ovalPath
=
Path
();
ovalPath
.
addOval
(
Rect
.
fromLTWH
(
100
,
30
,
200
,
100
));
rc
.
clipPath
(
ovalPath
);
rc
.
translate
(-
500
,
-
500
);
rc
.
save
();
rc
.
translate
(
500
,
500
);
rc
.
drawPath
(
ovalPath
,
paint
);
// The line below was causing SaveClipStack to incorrectly set
// transform before path painting.
rc
.
translate
(-
1000
,
-
1000
);
rc
.
save
();
rc
.
restore
();
rc
.
restore
();
rc
.
restore
();
// The rectangle should paint without clipping since we restored
// context.
rc
.
drawRect
(
Rect
.
fromLTWH
(
0
,
0
,
4
,
200
),
paint
);
await
_checkScreenshot
(
rc
,
'context_save_restore_transform'
);
});
test
(
'Should restore clip path'
,
()
async
{
final
engine
.
RecordingCanvas
rc
=
engine
.
RecordingCanvas
(
const
Rect
.
fromLTRB
(
0
,
0
,
400
,
300
));
final
Paint
goodPaint
=
Paint
()
..
color
=
Color
(
0x8000FF00
)
..
style
=
PaintingStyle
.
fill
;
final
Paint
badPaint
=
Paint
()
..
color
=
Color
(
0xFFFF0000
)
..
style
=
PaintingStyle
.
fill
;
rc
.
save
();
final
Path
ovalPath
=
Path
();
ovalPath
.
addOval
(
Rect
.
fromLTWH
(
100
,
30
,
200
,
100
));
rc
.
clipPath
(
ovalPath
);
rc
.
translate
(-
500
,
-
500
);
rc
.
save
();
rc
.
restore
();
// The rectangle should be clipped against oval.
rc
.
drawRect
(
Rect
.
fromLTWH
(
0
,
0
,
300
,
300
),
badPaint
);
rc
.
restore
();
// The rectangle should paint without clipping since we restored
// context.
rc
.
drawRect
(
Rect
.
fromLTWH
(
0
,
0
,
200
,
200
),
goodPaint
);
await
_checkScreenshot
(
rc
,
'context_save_restore_clip'
);
});
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录