POTI改 設置サポート掲示板

NSFW:

[91] 縦横比もキャンバスも崩れます


ぐるぐるめー ID:3bdbfe41 23/04/07

petit noteのほうですが、チキンペイントが最新版にアプデしたらiPadを横に構えれば横長に、縦に構えれば縦長にキャンバスが崩れて、お絵かきがしにくくなりました。
縦に構えてチキペでお絵かきすることが多いのですが、そうすると画面全体がモニタ外まで伸びてしまって、ツールボックス周りのウィンドウが操作できなくなってしまうのも困っています。
(特にレイヤーはモニタ外までウィンドウが伸びてしまうので、レイヤーの追加のボタンが画面からはみ出して、レイヤー追加ができません。
モニタ外まで追いかけてウィンドウを縮めようとすると、今度は画面全体が下にズレて、上の方のツールボックスが画面外に消えてしまいます。)
キャンバス(絵を描く部分)の縦横比や、画面全体の縦横比が崩れまくるのは何が原因なんでしょう?
どうにかなりませんでしょうか…
チキンペイントをメインに使いたいのでよろしくお願いします。

さとぴあ@管理人 [URL] ID:dd6ca656 23/04/07

正直にいうと、現時点ではまったくわかりません。
というのも、履歴を確認してみても、ChickenPaintのカラーピッカーの表示を修正したのが、
History for petitnote/app/chickenpaint
昨年の10月2日。
ChickenPaintの起動画面のHTMLの更新が昨年の10月9日で、それ以後の変更はありません。
History for petitnote/template/basic/paint_chi.html
あとは、何が発生しているのか、テキストだけでは把握ができない状態です。
そして、たびたび発生するのですが、iPad osの問題で、Chrome、Safariともに共通のレンダリングエンジンを使う決まりになっているので、iPadOSに問題があればwebアプリに影響がでます。
この場合、Petit Noteを更新した事が問題発生の原因なのか、それともそれ以外に原因があるのかを切り分ける作業からはじめる必要があります。
POTI-boardでは問題が発生しない→POTI-boardとPetit Noteを比較する。
私が運営しているサイトのPetit Noteでも問題が発生する→共通の問題?
という作業が必要になると思います。

ぐるぐるめー ID:3bdbfe41 23/04/07

ご返信ありがとうございます。少なくともキャンバスの縦横比が大きく崩れたのは今回の更新で初めて遭遇したので、どのタイミングで何が影響したのかは私にもわかりかねますね…

明日は休みなので、明日スクショを撮影して、どんな画面になっているかご報告します。
それから、POTIでも起きているか動作確認してみます。

少々お時間をください。

さとぴあ@管理人 [URL] ID:dd6ca656 23/04/07

古いバージョンのPetit Note
あとは、ここの緑のボタンからzipファイルをダウンロードしていただいて、
その中の
petitnote/template/basic/paint_chi.html
を、問題が発生しているPetit Noteの
paint_chi.htmlと入れ替えた時にどうなるかです。
この古いバージョンのものは起動時にフルスクリーンモードにならないように設定されています。
1年ぐらい前のものになります。

さとぴあ@管理人 [URL] ID:dd6ca656 23/04/07

ChickenPaint example

作者の方が設置しているサンプルページで問題が発生するかどうかも知りたいです。

また、画面全体が伸びているようなので、意味が無いのかもしれませんが、
上段の「パレット」メニューからの「初期化」で画面にパレットがフィットします。
その時にレイヤー等の操作の問題が解消するのか解消しないのかも知りたいです。
よろしくお願いします。

ぐるぐるめー ID:3bdbfe41 23/04/07

かしこまりました。ありがとうございます。明日色々トライしてみます。

ぐるぐるめー ID:3bdbfe41 23/04/07 - Showing thumbnail -

差し当たって画面にレイヤーツール窓が収まらずはみ出してしまうスクショを貼ります
連投失礼します
続きます

ぐるぐるめー ID:3bdbfe41 23/04/07 - Showing thumbnail -

一度横に構えたりするともうツールの移動を受け付けない場所にツール窓が逃げてしまいます

ぐるぐるめー ID:3bdbfe41 23/04/07 - Showing thumbnail -

キャンバスの縦横比が崩れるスクショです。
縦600横400の縦長キャンバスが横に潰れます.
ペンのポインタも大幅にズレて、狙った場所に描画できません。
これはpoti-boardでもおなじことが起きました

ぐるぐるめー ID:3bdbfe41 23/04/07 - Showing thumbnail -

また縦に構え直すと今度は細長くなります.ポインタがズレるのは相変わらず治りません

ツール窓の位置もかわるので、運が悪いとツール窓が画面から消えて探せなくなります

ぐるぐるめー ID:3bdbfe41 23/04/07 - Showing thumbnail -

原作者の方のサンプルページでもツール窓は画面からはみ出しますが、キャンバスの縦横比が崩れることはありませんでした

とりあえずここまでご報告です

さとぴあ@管理人 [URL] ID:dd6ca656 23/04/07

https://paintbbs.sakura.ne.jp/
の絵板でも同じ問題がでますでしょうか?
そして、
https://paintbbs.sakura.ne.jp/localPaintBBS/chickenpaint/
ここではどうなりますでしょうか?
作者さんのサイトの場合は、
Canvasサイズの入力が無しでデフォルト値が代入された結果問題が発生していない可能性があります。
もしそうであれば
https://paintbbs.sakura.ne.jp/localPaintBBS/chickenpaint/
ここでも問題は発生しません。
しかし、こちらには追加のJavaScriptが入っています。
もしも、
https://paintbbs.sakura.ne.jp/localPaintBBS/chickenpaint/
でも、キャンバスサイズの縦横サイズが変わるようなら、こちらで追加したJavaScriptを疑う事ができます。
問題が発生していないものを探してそこと同じにできれば解決するかもしれません。
ただし、ここ数ヶ月間変更していない箇所なので、iPad側で何かが変わった可能性が高いです。
レポートがちゃんとまとめられれば開発者さんに連絡できますが、iPadユーザーではないので解決するかどうかはわかりません。
Klecksの開発者さんはiPadで動作確認をしているので、何とかなるのですが…。

さとぴあ@管理人 [URL] ID:dd6ca656 23/04/07

詳細をお願いしたいところがあります。
>キャンバスの縦横比が崩れるスクショです。
>縦600横400の縦長キャンバスが横に潰れます.
この場合は、600x400のキャンバスが横に潰れた時のピクセル数の
幅と高さはいくつに変わるのでしょうか?
600x400だったものが400x400の正方形になりますか?
chickenpaintには、縦長のキャンバスをツールを使って回転すると、横長の画像になる機能があります。
もしかすると、縦と横の時の計算結果がiPad側で変わってしまったのかもしれません。
JavaScriptも古い関数が動かなくなる問題を抱えていますし、またブラウザにバグがあれば正しく動作しなくなります。
あとは、根本的な解決にはなりませんが、
縦向きで描く時は縦向きの状態で起動して横にしないという回避策が取れないか…とかですね…。
そして、フルスクリーンモードで起動すると問題がでるのであれば、オプションでフルスクリーンにするしないを選択可能にすれば回避できるのかもしれないのですが、
https://github.com/satopian/Petit_Note/tree/8fda530b4ed9eec6ffc0818fb03bdc68cd718179
ここの古いバージョンのPetit Noteのchickenpaint起動画面のためのHTMLの時にも問題が発生するようであれば、変更しても回避できない事になり、問題が発生しなくなるのであれば、フルスクリーンモードで使用しない事で回避が可能かもしれません。

ぐるぐるめー ID:3bdbfe41 23/04/07

かしこまりました。一つ一つチェックポイントを潰していって確認してみます。
書いたものを投稿するとどうなるかまではチェックしていなかったので、投稿した結果も含めて検証してみます。

あと気になったのが、作者さんの板では縦横にiPadを回転しても、ペンのポインタの座標がズレることは無かったということもつけ加えておきます。

iPadを回すとペンのポインタの座標が狂うのは結構でかいバグだと思うので、その原因も探してみたいです。
明日色々検証してみます。

さとぴあ@管理人 [URL] ID:dd6ca656 23/04/08

https://paintbbs.sakura.ne.jp/cgi/neosample/petitnote/
ここのサンプル板のChickenPaintを、作者さんのexampleに近いファイル構成になるように書き直してみました。
もし試していただいて、キャンバスサイズが変化する問題が発生しなければ、そのファイル構成で今後はやっていくという判断ができます。
何も変わらなければ元に戻します。
あとは、すでに確認ずみとは思いますが、iPadの再起動とキャッシュのクリアもよろしくお願いします。
なんらかの問題をデバイス側でひきずっている可能性もあるからです。

ぐるぐるめー ID:3bdbfe41 23/04/08

順にお答えします。
>paintbbs.sakura.ne.jp/
の絵板でも同じ問題がでますでしょうか?

はい。ウィンドウが画面外にはみ出していて、iPadを回すと縦横比が崩れペンのポインタがズレます。

>paintbbs.sakura.ne.jp/localPaintBBS/chickenpaint/
ここではどうなりますでしょうか?

同じ現象が起きます。

>paintbbs.sakura.ne.jp/localPaintBBS/chickenpaint/
ここでも問題は発生しません。
しかし、こちらには追加のJavaScriptが入っています。

こちらも同じ現象が起きます。

>paintbbs.sakura.ne.jp/localPaintBBS/chickenpaint/
でも、キャンバスサイズの縦横サイズが変わるようなら、こちらで追加したJavaScriptを疑う事ができます。

同じ現象が起きます。

>paintbbs.sakura.ne.jp/cgi/neosample/petitnote/
ここのサンプル板のChickenPaintを、作者さんのexampleに近いファイル構成になるように書き直してみました。
もし試していただいて、キャンバスサイズが変化する問題が発生しなければ、そのファイル構成で今後はやっていくという判断ができます。

同じ現象が起きます。

iPadを再起動しましたが作者さんのテスト板以外はすべて同じ現象が起きました。

また、描いているときの縦横比は崩れますが、投稿すると縦横比は正しい400*600のサイズで投稿されました。
添付の赤い画像が縦横比が崩れた状態で描いたものです。

これから古いバージョンに落とした状態を作って試し書きしてみます。

ぐるぐるめー ID:3bdbfe41 23/04/08

古いバージョンの、フルスクリーンにしないテンプレートにしてテストしてみたら、レイヤーのツール窓が画面からはみ出さなくなり、縦横比が崩れたり、ペンのポインタがズレて書きにくくなることはなくなりました。

ぐるぐるめー ID:3bdbfe41 23/04/08

五月雨式に失礼します。

古いバージョンに落としても、古いバージョンからフルスクリーンモードに切り替えると、やっぱり画面がはみ出したり、縦横比が崩れたり、ペンのポインタがズレたりしました。

iPadはフルスクリーンモードを使わない方がいいみたいです。

さとぴあ@管理人 [URL] ID:dd6ca656 23/04/08

詳しくありがとうございます。
フルスクリーンモードを選択式に戻すことを検討します。
あとは、フルスクリーンモードでも使えるにこした事はありませんから、作者さんにフィードバックします。

必要な情報。
iPadOSの詳細なバージョン。
使用ブラウザとブラウザのバージョン。

画像として欲しいのが、
横向きの状態で
キャンバスに正方形を描いて頂いて、
iPadを縦にすると、白地のキャンバスだけでなく、画像の正方形も縦に伸びてしまう画像です。
白地のキャンバスだけだと、開くキャンバスのサイズの計算の問題のように見えてしまいますが、画像のアスペクト比も崩れるのであれば、ChickenPaintが生成するスタイルシートに問題がある可能性があります。

お手数をおかけしますが、よろしくお願いします。

さとぴあ@管理人 [URL] ID:dd6ca656 23/04/08

追記。
ChickenPaintの作者さんのページ
https://thenickdude.github.io/chickenpaint-example/
でフルスクリーンモードに切り替えた時に問題が発生するかどうかの確認をしていただけますでしょうか。
こちらでカスタムしたもので問題が発生しているというだけでは、作者さんに修正をお願いできないからです。
作者さんがサンプルとして設置しているもので問題が発生している事を確認したいです。

ぐるぐるめー ID:3bdbfe41 23/04/08 - Showing thumbnail -

お答えします。

iPadのバージョンは16.3.1
ブラウザはchromeで111.0.5563.101
です.まだアプデしてないですが、これからアプデ予定です。

画像は添付のとおりです。
追記の作者さんのサイトでも、フルスクリーンにすると同じ問題が起きました。

よろしくお願いします

ぐるぐるめー ID:3bdbfe41 23/04/08 - Showing thumbnail -

証拠として四角を描いた最初の状態のスクショです

ぐるぐるめー ID:3bdbfe41 23/04/08 - Showing thumbnail -

作者さんのサイトでも同じことが起きている写真です。
横長のキャンバスが変形しています

ぐるぐるめー ID:3bdbfe41 23/04/08 - Showing thumbnail -

さらに作者さんのサイトで何度も傾きを変えているうちにキャンバスが横に伸びた写真も添付いたします

さとぴあ@管理人 [URL] ID:dd6ca656 23/04/08

ありがとうございます。
あとは、これは作者の方に投げたほうが良かったのかもしれないのですが、HTMLの文法を厳密にチェックするとエラーになる箇所が数か所存在していたため、ここかも?というところを修正したバージョンをビルドしてみました。
すぐにアップロードしますので、すみませんが、そちらで引き続き問題が発生するかどうか教えて頂けないでしょうかよろしくお願いします。
少しだけお待ちください。

さとぴあ@管理人 [URL] ID:dd6ca656 23/04/08

https://paintbbs.sakura.ne.jp/cgi/neosample/test/petitnote/

ChickenPaintのHTMLのCanvasタグに関わる箇所でHTMLの文法上エラーになる箇所を修正したものがこれです。
これで駄目なら作者さんに投げます。
そして、解決しないようならフルスクリーンモードでの起動をあきらめて、選択式にもどします。
何度もお願いしてしまってすみませんが、この一件で最後にする予定ですので、よろしくお願いします。
ただし、作者さんのほうで修正したもののチェックをお願いする事があるかもしれません。

ぐるぐるめー ID:3bdbfe41 23/04/08 - Showing thumbnail -

チェックしてみました。
同じです。やっぱり縦横比が崩れて、ポインタがずれます。
レイヤーツール窓がはみ出します。
写真を添付いたします。正方形を描いたものです。
よろしくお願いします

さとぴあ@管理人 [URL] ID:dd6ca656 23/04/09

作者の方のGitHubのリポジトリに問題を提出しました。
回答待ちです。
JavaScript(jQuery)の高さの計算をしている箇所が、iPadに適した関数ではない可能性があったため、独自に修正してみました。

https://paintbbs.sakura.ne.jp/cgi/neosample/test/p/petitnote/

この板で、ChickenPaintをフルスクリーンモードにした時に、iPadを縦または横に変更して、問題が継続して発生する、あるいは、問題が解決している事を確認していただけないでしょうか?
お手数をおかけしてすみませんが、よろしくお願いします。

ぐるぐるめー ID:3bdbfe41 23/04/09

ご対応ありがとうございます。
原作者さんへのご連絡ありがとうございます。お手数おかけしました。

さて、早速テストしてみました。
ちょっと説明しにくい感じになりました。

1。レイヤーその他のツールウィンドウははみ出さなくなりました。画面内に収まっています。

2。フルスクリーンに切り替えてiPadを傾けると、縦横比が崩れ、ペンのポインタがズレます。

3。フルスクリーンモードを解除すると、不具合が解消されます。

4。再びフルスクリーンモードに切り替えて、「傾けない状態で」描画すると、ツールウィンドウは画面内に収まった状態でフルスクリーンになり、縦横比に異常が出ないで、ペンのポインタもズレずに正確に描画できます。

5。この状態でまたiPadを傾けると、また不具合が起きますが、フルスクリーンのオンオフをすると不具合が解消します。

という、ちょっと説明しにくい状態になりましたが、一応は解決しています。

いかがでしょうか?

さとぴあ@管理人 [URL] ID:dd6ca656 23/04/09

暫定措置として、それでやってみます。
あとは、開発者の方に追加の情報をだして、対応を待ちます。

ぐるぐるめー ID:3bdbfe41 23/04/09

ご対応ありがとうございます。
よろしくお願いします。

また新しく協力が必要になりましたらTwitterからお知らせいただけると助かります。

さとぴあ@管理人 [URL] ID:dd6ca656 23/05/02

Petit NoteとPOTI-boardに独自修正版を同梱しています。
この問題は最新版で解決しています。
開発元にはプルリクエスト中。

[HOME / Admin]
Petit Note v1.26.8 Template BASIC
OekakiApp - PaintBBS NEO , Tegaki , Klecks , ChickenPaint Be
UseFunction - DynamicPalette , Lightbox