回答編集履歴
1
SVGによる解決策を追加
answer
CHANGED
|
@@ -2,4 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
- `img`要素に何らかの要素(`div`等)を`position:absolute`等で重ねる
|
|
4
4
|
- `canvas`要素に画像を描画し, その上に`strokeRect`で四角を描画する.
|
|
5
|
-
- 画像をインラインSVGで表示し, `rect`要素の位置を操作する.
|
|
5
|
+
- 画像をインラインSVGで表示し, `rect`要素の位置を操作する.
|
|
6
|
+
|
|
7
|
+
> 赤い枠を動かす操作はありますか？
|
|
8
|
+
>> 表を表示した後ということですか？表示後はないです。
|
|
9
|
+
|
|
10
|
+
とのことでしたら, インラインSVGによる方法がシンプルで良いかと思います.
|
|
11
|
+
|
|
12
|
+
```HTML
|
|
13
|
+
<svg width="200px" height="200px" viewBox="0 0 300 400"><!--viewBoxには画像のサイズを指定する-->
|
|
14
|
+
<image xlink:href="a.jpg" width="100%" height="100%"/>
|
|
15
|
+
<rect x="50" y="100" width="50" height="100"
|
|
16
|
+
fill="none" stroke="red" stroke-width="2" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><!--枠の位置を指定する-->
|
|
17
|
+
<svg>
|
|
18
|
+
|
|
19
|
+
```
|