質問編集履歴
4
情報の補足
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -4,6 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
webサイト上にて、<canvas>で作成した図をボタンで拡大縮小することができるサイトを作成しています。
|
|
6
6
|
|
|
7
|
+
また、拡大縮小する際は、<canvas>図の中央部分を基点に拡大縮小し、見ている箇所も中央部分をつねにフォーカスしているようにしたいです。
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
7
11
|
また、<canvas>の外側に設定した<div>にcssでoverflow:scroll;を指定し、スクロールして拡大したどの部分でも見れるようにする。
|
|
8
12
|
|
|
9
13
|
このようなサイトを作成しております。
|
|
@@ -339,3 +343,13 @@
|
|
|
339
343
|
|
|
340
344
|
|
|
341
345
|
また、拡大縮小にはtransformを使わなくてはいけないわけではないので、他に良い方法があればご教示いただきたいです。
|
|
346
|
+
|
|
347
|
+
|
|
348
|
+
|
|
349
|
+
|
|
350
|
+
|
|
351
|
+
そして、この<canvas>図を表示するビューワーの作成方法についても、こだわっていません。
|
|
352
|
+
|
|
353
|
+
自分の要望が満たせればよいと考えております。
|
|
354
|
+
|
|
355
|
+
他に良い方法があれば教えていただきたいです。
|
3
補足の追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -292,6 +292,50 @@
|
|
|
292
292
|
|
|
293
293
|
### 補足情報（FW/ツールのバージョンなど）
|
|
294
294
|
|
|
295
|
-
|
|
295
|
+
**■<div class = "canvas-wrapper">について**
|
|
296
|
+
|
|
296
|
-
|
|
297
|
+
<div class = "canvas-wrapper"></div>のheight,widthは固定しています。
|
|
298
|
+
|
|
299
|
+
|
|
300
|
+
|
|
301
|
+
**■拡大縮小の方法について**
|
|
302
|
+
|
|
297
|
-
|
|
303
|
+
jsを用いて拡大縮小しております。
|
|
304
|
+
|
|
305
|
+
お見せできない情報なのですが、
|
|
306
|
+
|
|
307
|
+
開発者ツールを用いてみてみると、ボタン押下後、ｃｓｓに下記が追記される仕組みです。
|
|
308
|
+
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
canvas{
|
|
314
|
+
|
|
315
|
+
transform:scale(数値);
|
|
316
|
+
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
|
|
320
|
+
|
|
321
|
+
ボタンを押すごとに、数値の中には0.2～3あたりまでの足し引きされた数値が入るようにしています。初期値1
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
|
|
325
|
+
|
|
326
|
+
|
|
327
|
+
**■jsの拡大縮小について**
|
|
328
|
+
|
|
329
|
+
拡大縮小する際に、transform-origin:left topを設定すれば、
|
|
330
|
+
|
|
331
|
+
<canvas>の左上を基点として拡大縮小するので、
|
|
332
|
+
|
|
333
|
+
スクロールバーを使って<canvas>の図をすべて見ることができます。
|
|
334
|
+
|
|
335
|
+
|
|
336
|
+
|
|
337
|
+
しかし、↑の拡大縮小の方法ではなく、図の中央部分を基点として拡大縮小したいと考えていますので、transform-origin:left topは設定しておりません。
|
|
338
|
+
|
|
339
|
+
|
|
340
|
+
|
|
341
|
+
また、拡大縮小にはtransformを使わなくてはいけないわけではないので、他に良い方法があればご教示いただきたいです。
|
2
css インデント、divの修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -50,27 +50,27 @@
|
|
|
50
50
|
|
|
51
51
|
<table>
|
|
52
52
|
|
|
53
|
-
<tr>
|
|
53
|
+
<tr>
|
|
54
|
-
|
|
54
|
+
|
|
55
|
-
<td>
|
|
55
|
+
<td>
|
|
56
|
-
|
|
56
|
+
|
|
57
|
-
<div class = "viewer">
|
|
57
|
+
<div class = "viewer">
|
|
58
|
-
|
|
58
|
+
|
|
59
|
-
<div class = "menubar">
|
|
59
|
+
<div class = "menubar">
|
|
60
|
-
|
|
60
|
+
|
|
61
|
-
<div class = "canvas-wrapper">
|
|
61
|
+
<div class = "canvas-wrapper">
|
|
62
|
-
|
|
62
|
+
|
|
63
|
-
<canvas width = "1664" height = "2335" class = "canvas"//ここは個人情報の為載せられません。>
|
|
63
|
+
<canvas width = "1664" height = "2335" class = "canvas"//ここは個人情報の為載せられません。>
|
|
64
|
-
|
|
64
|
+
|
|
65
|
-
</div>
|
|
65
|
+
</div>
|
|
66
|
-
|
|
66
|
+
|
|
67
|
-
</div>
|
|
67
|
+
</div>
|
|
68
|
-
|
|
68
|
+
|
|
69
|
-
</div>
|
|
69
|
+
</div>
|
|
70
|
-
|
|
70
|
+
|
|
71
|
-
</td>
|
|
71
|
+
</td>
|
|
72
|
-
|
|
72
|
+
|
|
73
|
-
</tr>
|
|
73
|
+
</tr>
|
|
74
74
|
|
|
75
75
|
</table>
|
|
76
76
|
|
1
誤字の修正を行いました（orverflow ⇒overflow）
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
【css】o
|
|
1
|
+
【css】overflow:scroll;で指定した範囲のスクロール領域が一部表示されません。。
|
test
CHANGED
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
webサイト上にて、<canvas>で作成した図をボタンで拡大縮小することができるサイトを作成しています。
|
|
6
6
|
|
|
7
|
-
また、<canvas>の外側に設定した<div>にcssでo
|
|
7
|
+
また、<canvas>の外側に設定した<div>にcssでoverflow:scroll;を指定し、スクロールして拡大したどの部分でも見れるようにする。
|
|
8
8
|
|
|
9
9
|
このようなサイトを作成しております。
|
|
10
10
|
|
|
11
|
-
ですが、o
|
|
11
|
+
ですが、overflow:scroll;で指定した範囲の図がスクロールできず、困っております。
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
■発生している問題
|
|
36
36
|
|
|
37
|
-
o
|
|
37
|
+
overflow:scroll;で指定した範囲の<canvas>図を拡大した際に発生します。
|
|
38
38
|
|
|
39
39
|
拡大すると、スクロールバーが出てくるのですが、拡大し続けると、図の左側と上部がどんどん隠れていきます。
|
|
40
40
|
|