Блог

Главная - Вопросы по программированию - Странный линейный рендеринг с круглым соединением линий и нецелым масштабом

Странный линейный рендеринг с круглым соединением линий и нецелым масштабом

#javascript #google-chrome #canvas #html5-canvas

Вопрос:

Некоторые строки с lineJoin="round" странно отображаются в определенных масштабах, вот пример со шкалой 1.403619311470477 и без нее: https://jsfiddle.net/kxjcosgf/2/

 <canvas id="canvas" width="2000" height="2000"> </canvas>

<script>
const points = "45.13869240187139,481.020616681278,45.13869240187139,480.72980663647314,44.84788235706651,479.5665664572536,44.70247733466407,477.9671112108268,44.84788235706651,477.53089614361943,44.84788235706651,477.385491121217,44.993287379468946,476.80387103160723,45.28409742427383,476.22225094199746,46.44733760349335,475.059010762778,47.319767737907995,474.9136057403755,47.90138782751775,475.34982080758283,48.19219787232263,475.7860358747902,48.483007917127516,476.5130609868024,48.62841293952995,476.94927605400966,48.33760289472507,477.67630116602186".split(",")

const ctx = canvas.getContext("2d")
ctx.strokeStyle = "black"
ctx.lineWidth = 2
ctx.lineCap = "round"
ctx.lineJoin = "round"

ctx.beginPath()
ctx.moveTo(points[0], points[1])
for (let i = 2; i < points.length; i  = 2) {
  ctx.lineTo(points[i], points[i   1])
}
ctx.stroke()

ctx.scale(1.403619311470477, 1.403619311470477)
ctx.beginPath()
ctx.moveTo(points[0], points[1])
for (let i = 2; i < points.length; i  = 2) {
  ctx.lineTo(points[i], points[i   1])
}
ctx.stroke()

window.scrollBy(0, 400)
</script>

Я ожидаю масштабированную версию верхнего штриха (отмеченную синим цветом), но вместо этого получаю странный луч на Chrome 94.0, выходящий из него.

введите описание изображения здесь

Комментарии:

1. Похоже на ошибку, так как она не воспроизводима в Chrome 93

2. Определенно ошибка (ошибка округления в пути кода GPU Skia). Однако это довольно странно, потому что я не могу повторить ни в какой другой ветви хрома (т. е. я не мог сделать правильную деление пополам, даже используя точно такую же сборку…). Таким образом, это, кажется, хорошо работает в текущей канарейке, что может означать, что это исправлено, но в то же время это могло и не быть. Поэтому, пожалуйста, направьтесь к crbug.com в любом случае, чтобы открыть новую проблему, четко отметив, что это влияет на стабильную ветвь. В качестве уродливого обходного пути вы можете принудительно выполнить отрисовку ЦП, передав { willReadFrequently: true } параметры ввода getContext()

Метки: