前提・実現したいこと

webサイト上にて、<canvas>で作成した図をボタンで拡大縮小することができるサイトを作成しています。
また、拡大縮小する際は、<canvas>図の中央部分を基点に拡大縮小し、見ている箇所も中央部分をつねにフォーカスしているようにしたいです。

また、<canvas>の外側に設定した<div>にcssでoverflow:scroll;を指定し、スクロールして拡大したどの部分でも見れるようにする。
このようなサイトを作成しております。
ですが、overflow:scroll;で指定した範囲の図がスクロールできず、困っております。

※個人情報などがあるのですべて公開できず、申し訳ございません。
回答はあまり期待できないと思いますが、
何かご存じなこと、等ございましたら教えていただきたいです。。

発生している問題・エラーメッセージ

■エラーメッセージ
なし

■発生している問題
overflow:scroll;で指定した範囲の<canvas>図を拡大した際に発生します。
拡大すると、スクロールバーが出てくるのですが、拡大し続けると、図の左側と上部がどんどん隠れていきます。
スクロールバーを見てみると、右と下にしか行けなくなっており困っております。
隠れてしまう図の左側と上部をスクロールバーで移動して見れるようにしたく思っております。

該当のソースコード

html
1<table>
2　<tr>
3　　<td>
4　　　<div class = "viewer">
5　　　　<div class = "menubar">
6　　　　　<div class = "canvas-wrapper">
7　　　　　　<canvas width = "1664" height = "2335" class = "canvas"//ここは個人情報の為載せられません。>
8　　　　　</div>
9　　　　</div>
10　　　</div>
11　　</td>
12　</tr>
13</table>
14}
15

css
1.viewer {
2    box-shadow: 0 5px 10px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23);
3    width: fit-content;
4    /* background-color: yellow; */
5}
6.viewer .canvas-wrapper {
7    background-color: darkgray;
8    overflow: auto;
9
10    display: flex;
11    justify-content: flex-start;
12    align-items: center;
13    flex-direction: column;
14}
15.viewer .canvas {
16    max-width: 100%;
17    /* max-height: 100%; */
18}
19
20.viewer .menubar {
21    display: flex;
22    justify-content: center;
23    align-items: center;
24
25    padding: 5px 0;
26
27    background-color: #fafafa;
28    width: 100%;
29    /* height: 25px; */
30    /* height: 1.5em; */
31}
32
33.viewer .button-wrapper {
34    display: flex;
35    justify-content: center;
36    align-items: center;
37
38    height: 100%;
39    margin: 0 1em;
40}
41
42.viewer .button-group {
43    margin: 0 0.7em;
44    height: 1.5em;
45    display: flex;
46    /* margin: auto; */
47}
48
49.viewer .button-wrapper .Menubar-Button {
50    height: 100%;
51    width: 2.2em;
52    margin: 0 0.05em;
53
54    display: flex;
55    justify-content: center;
56    align-items: center;
57
58    color: black;
59    background-color: #fff;
60
61    border: 1px solid var(--TiffOne-accent-color);
62    border-radius: 2px;
63    box-sizing: border-box;
64
65    cursor: pointer;
66}
67
68
69.viewer .button-wrapper .Menubar-Button:hover {
70    color: white;
71    background-color: var(--TiffOne-accent-color);
72}
73
74
75.viewer .button-wrapper .Menubar-Button > * {
76    pointer-events: none;
77}
78
79.viewer .page-indicator {
80    width: auto;
81    min-width: 2.5em;
82    height: 100%;
83    margin: 0 0.05em;
84
85    text-align: center;
86
87    color: black;
88    background-color: #fff;
89
90    border: 1px solid var(--TiffOne-accent-color);
91    border-radius: 2px;
92    box-sizing: border-box;
93}
94
95.canvas-wrapper {
96    margin-left: 70px;
97}

試したこと

overflow: scroll;

補足情報（FW/ツールのバージョンなど）

■<div class = "canvas-wrapper">について

<div class = "canvas-wrapper"></div>のheight,widthは固定しています。

■拡大縮小の方法について
jsを用いて拡大縮小しております。
お見せできない情報なのですが、
開発者ツールを用いてみてみると、ボタン押下後、ｃｓｓに下記が追記される仕組みです。

canvas{
transform:scale(数値);
}

ボタンを押すごとに、数値の中には0.2～3あたりまでの足し引きされた数値が入るようにしています。初期値1

■jsの拡大縮小について
拡大縮小する際に、transform-origin:left topを設定すれば、
<canvas>の左上を基点として拡大縮小するので、
スクロールバーを使って<canvas>の図をすべて見ることができます。

しかし、↑の拡大縮小の方法ではなく、図の中央部分を基点として拡大縮小したいと考えていますので、transform-origin:left topは設定しておりません。

また、拡大縮小にはtransformを使わなくてはいけないわけではないので、他に良い方法があればご教示いただきたいです。

そして、この<canvas>図を表示するビューワーの作成方法についても、こだわっていません。
自分の要望が満たせればよいと考えております。
他に良い方法があれば教えていただきたいです。

K_3578

2021/06/01 08:53

orverflow → overflow >タイトル、本文

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

質問の修正を受けて追記

関連した質問