質問編集履歴
4
情報の補足
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
webサイト上にて、<canvas>で作成した図をボタンで拡大縮小することができるサイトを作成しています。
|
|
4
|
+
また、拡大縮小する際は、<canvas>図の中央部分を基点に拡大縮小し、見ている箇所も中央部分をつねにフォーカスしているようにしたいです。
|
|
5
|
+
|
|
4
6
|
また、<canvas>の外側に設定した<div>にcssでoverflow:scroll;を指定し、スクロールして拡大したどの部分でも見れるようにする。
|
|
5
7
|
このようなサイトを作成しております。
|
|
6
8
|
ですが、overflow:scroll;で指定した範囲の図がスクロールできず、困っております。
|
|
@@ -168,4 +170,9 @@
|
|
|
168
170
|
|
|
169
171
|
しかし、↑の拡大縮小の方法ではなく、図の中央部分を基点として拡大縮小したいと考えていますので、transform-origin:left topは設定しておりません。
|
|
170
172
|
|
|
171
|
-
また、拡大縮小にはtransformを使わなくてはいけないわけではないので、他に良い方法があればご教示いただきたいです。
|
|
173
|
+
また、拡大縮小にはtransformを使わなくてはいけないわけではないので、他に良い方法があればご教示いただきたいです。
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
そして、この<canvas>図を表示するビューワーの作成方法についても、こだわっていません。
|
|
177
|
+
自分の要望が満たせればよいと考えております。
|
|
178
|
+
他に良い方法があれば教えていただきたいです。
|
3
補足の追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -145,5 +145,27 @@
|
|
|
145
145
|
overflow: scroll;
|
|
146
146
|
|
|
147
147
|
### 補足情報（FW/ツールのバージョンなど）
|
|
148
|
+
**■<div class = "canvas-wrapper">について**
|
|
149
|
+
<div class = "canvas-wrapper"></div>のheight,widthは固定しています。
|
|
148
150
|
|
|
151
|
+
**■拡大縮小の方法について**
|
|
149
|
-
|
|
152
|
+
jsを用いて拡大縮小しております。
|
|
153
|
+
お見せできない情報なのですが、
|
|
154
|
+
開発者ツールを用いてみてみると、ボタン押下後、ｃｓｓに下記が追記される仕組みです。
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
canvas{
|
|
158
|
+
transform:scale(数値);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
ボタンを押すごとに、数値の中には0.2～3あたりまでの足し引きされた数値が入るようにしています。初期値1
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
**■jsの拡大縮小について**
|
|
165
|
+
拡大縮小する際に、transform-origin:left topを設定すれば、
|
|
166
|
+
<canvas>の左上を基点として拡大縮小するので、
|
|
167
|
+
スクロールバーを使って<canvas>の図をすべて見ることができます。
|
|
168
|
+
|
|
169
|
+
しかし、↑の拡大縮小の方法ではなく、図の中央部分を基点として拡大縮小したいと考えていますので、transform-origin:left topは設定しておりません。
|
|
170
|
+
|
|
171
|
+
また、拡大縮小にはtransformを使わなくてはいけないわけではないので、他に良い方法があればご教示いただきたいです。
|
2
css インデント、divの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -24,17 +24,17 @@
|
|
|
24
24
|
### 該当のソースコード
|
|
25
25
|
```html
|
|
26
26
|
<table>
|
|
27
|
-
<tr>
|
|
27
|
+
<tr>
|
|
28
|
-
<td>
|
|
28
|
+
<td>
|
|
29
|
-
<div class = "viewer">
|
|
29
|
+
<div class = "viewer">
|
|
30
|
-
<div class = "menubar">
|
|
30
|
+
<div class = "menubar">
|
|
31
|
-
<div class = "canvas-wrapper">
|
|
31
|
+
<div class = "canvas-wrapper">
|
|
32
|
-
<canvas width = "1664" height = "2335" class = "canvas"//ここは個人情報の為載せられません。>
|
|
32
|
+
<canvas width = "1664" height = "2335" class = "canvas"//ここは個人情報の為載せられません。>
|
|
33
|
-
</div>
|
|
33
|
+
</div>
|
|
34
|
-
</div>
|
|
34
|
+
</div>
|
|
35
|
-
</div>
|
|
35
|
+
</div>
|
|
36
|
-
</td>
|
|
36
|
+
</td>
|
|
37
|
-
</tr>
|
|
37
|
+
</tr>
|
|
38
38
|
</table>
|
|
39
39
|
}
|
|
40
40
|
|
1
誤字の修正を行いました（orverflow ⇒overflow）
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
【css】
|
|
1
|
+
【css】overflow:scroll;で指定した範囲のスクロール領域が一部表示されません。。
|
body
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
webサイト上にて、<canvas>で作成した図をボタンで拡大縮小することができるサイトを作成しています。
|
|
4
|
-
また、<canvas>の外側に設定した<div>にcssで
|
|
4
|
+
また、<canvas>の外側に設定した<div>にcssでoverflow:scroll;を指定し、スクロールして拡大したどの部分でも見れるようにする。
|
|
5
5
|
このようなサイトを作成しております。
|
|
6
|
-
ですが、
|
|
6
|
+
ですが、overflow:scroll;で指定した範囲の図がスクロールできず、困っております。
|
|
7
7
|
|
|
8
8
|
※個人情報などがあるのですべて公開できず、申し訳ございません。
|
|
9
9
|
回答はあまり期待できないと思いますが、
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
なし
|
|
17
17
|
|
|
18
18
|
■発生している問題
|
|
19
|
-
|
|
19
|
+
overflow:scroll;で指定した範囲の<canvas>図を拡大した際に発生します。
|
|
20
20
|
拡大すると、スクロールバーが出てくるのですが、拡大し続けると、図の左側と上部がどんどん隠れていきます。
|
|
21
21
|
スクロールバーを見てみると、右と下にしか行けなくなっており困っております。
|
|
22
22
|
隠れてしまう図の左側と上部をスクロールバーで移動して見れるようにしたく思っております。
|