Improve scaling response (optically) => with sollution
@oscarlorentzon がすでに取り組んでいます。
2019年11月19日 から。
評価
この issue はまだ評価されていません。
説明
When the size of the mapillary element changes the canvas remains the "old" size for some time.
This is because a higher resolution image needs to be downloaded and/or the canvas needs the be recalculated for the new size. This takes some time which makes the system look a bit sluggish.
Especially when the size of the mapillary gets animated from a relatively small size to a large size the effect is beyond akward.
I fixed this (optically)!
1) I set this in CSS (the container of the canvas)
.mapillary-js-interactive {
height: 100%;
width: 100%;
}
2) Just before I do (and/or detect) the resizing of the window/div I set the canvas (with class 'mapillary-js-canvas') : to
height: 100%;
width: 100%;
3) I call mly.resize(); (after the animation of the resizing is completed!)
The result is that the image of the "old" canvas gets stretched into the new size, that way the complete area remains to be covered with the "old image". When the animation/resizing is complete the new canvas gets calculated.
this can easily be implemented into mapillary-js... no harm done and animation is very exceptable, resulting in an optically more responsive/adaptive feeling :)
PS: you could even go the whole nine yards with calculating the difference in size and alter the percentages accordingly (one at 100% an the other one more, using negative margins to center the image.. haven't done that, yet:P)
PS2: Now that I come to think of it.. why not keep it at 100%/100% by default (for the canvas ant it's container)? I see no reason to force the size of the canvas?
- 主要言語
- TypeScript
- スター
- 519
- フォーク
- 89
- 平均マージ
- 3日 18時間
- マージ済み PR（30日）
- 4
環境構築
- Dockerfile または Docker Compose ファイルあり
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
mapillary/mapillary-js のほかの issue
-
Missing tooltipsオープン
難易度 4/5 3〜5日 初心者へのやさしさ 25/100
mapillary/mapillary-js#639 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
mapillary/mapillary-js#638 ·
-
Transition modeオープン
難易度 4/5 3〜5日 初心者へのやさしさ 25/100
mapillary/mapillary-js#633 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
mapillary/mapillary-js#623 ·
-
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
mapillary/mapillary-js#618 ·
mapillary/mapillary-js の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
Comfy-Org/ComfyUI_frontend#20346 ·
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 90/100
decentralized-identity/didwebvh-ts#203 ·
メンテナーはふだん 1 日以内に返信
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
lingdojo/kana-dojo#31791 · コメント 1 件 · リアクション 5 件 ·
メンテナーはふだん 1 日以内に返信
-
Telegram webhook: line breaks lost since switch to rich messages対応中かも @Kshot3000 が今日担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信
-
github_actions security
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
メンテナーはふだん 1 日以内に返信