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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1174閲覧

overflow:scrollで見たい箇所が一部隠れてしまいます。

yutaroshiraishi

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/06/02 01:41

前提・実現したいこと

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

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

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

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

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

canvas{
transform:scale(数値);
}

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

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

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

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

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

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

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

■エラーメッセージ
なし

■発生している問題
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/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問