DOMRect.fromRect() - 新しい矩形を作成する
fromRect()は、DOMRectのメソッドです。新しい矩形を作成します。コンストラクタと似ていますが、こちらは引数に他のDOMRectを指定すると、それを複製できます。
概要
- 名前
- fromRect
- 所属
- DOMRect
- IDL
[NewObject] static DOMRect fromRect(optional DOMRectInit other); dictionary DOMRectInit { unrestricted double x = 0; unrestricted double y = 0; unrestricted double width = 0; unrestricted double height = 0; };
- 仕様書
- https://drafts.fxtf.org/geometry-1/#dom-domrect-fromrect
説明
引数(other)には、オプションとなるオブジェクトを指定する。指定できるキーは下記の通りです。また、オプションではなくDOMRectやDOMRectReadOnlyをそのまま指定すると複製できます。
- x
- 切り取りの開始点を表す水平方向のオフセット。左端からの距離。
- y
- 切り取りの開始点を表す垂直方向のオフセット。上端からの距離。
- width
- 横幅。
- height
- 高さ。
チュートリアル
このメソッドはコンストラクタ関数です。下記のように利用して下さい。
// 複製
DOMRect.fromRect( domRect ) ;
// 新規作成
DOMRect.fromRect( {
x: 10 ,
y: 20 ,
width: 100 ,
height: 50 ,
} ) ;
デモ
DOMRect.fromRect()のデモです。黄色い背景の要素のDOMRect(domRect1)を赤枠、メソッドで新しく作成するDOMRect(domRect2)を青枠で表示しています。コメントアウトを外して、複製するパターンも試してみて下さい。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
.dom-rect { position: absolute ; }
.red { border: 1px solid red ; }
.blue { border: 1px solid blue ; }
div#hoge {
margin: 30px 0 0 45px ;
width: 200px ;
height: 150px ;
line-height: 150px ;
text-align: center ;
background-color: #fffff0 ;
}
</style>
</head>
<body>
<div id="hoge">SYNCER</div>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
var domRect1 = element.getBoundingClientRect() ;
getDOMRectInfo( domRect1 ) ;
createDOMRectElement( domRect1, "red" ) ;
var domRect2 = DOMRect.fromRect( { x: 10, y: 20, width: 100, height: 50 } ) ;
// var domRect2 = DOMRect.fromRect( domRect1 ) ; // コメントアウトを外してみよう!
getDOMRectInfo( domRect2 ) ;
createDOMRectElement( domRect2, "blue" ) ;
function appendText ( text ) {
document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
function getDOMRectInfo ( domRect ) {
console.log( domRect ) ;
appendText( "\t" + domRect + "\n" ) ;
appendText( "\t\t" + "x: " + domRect.x + "\n" ) ;
appendText( "\t\t" + "y: " + domRect.y + "\n" ) ;
appendText( "\t\t" + "width: " + domRect.width + "\n" ) ;
appendText( "\t\t" + "height: " + domRect.height + "\n" ) ;
appendText( "\t\t" + "top: " + domRect.top + "\n" ) ;
appendText( "\t\t" + "right: " + domRect.right + "\n" ) ;
appendText( "\t\t" + "bottom: " + domRect.bottom + "\n" ) ;
appendText( "\t\t" + "left: " + domRect.left + "\n\n" ) ;
}
function createDOMRectElement ( domRect, color ) {
var domRectElement = document.createElement( "div" ) ;
domRectElement.className = "dom-rect " + color ;
domRectElement.style.left = (domRect.x - 1) + "px" ;
domRectElement.style.top = (domRect.y - 1) + "px" ;
domRectElement.style.width = domRect.width + "px" ;
domRectElement.style.height = domRect.height + "px" ;
document.body.appendChild( domRectElement ) ;
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 61+ | × | ● 10+ | × | × | ● 48+ | ● 10.0+ | × |
関連記事
- DOMRect()
- DOMRect()は、DOMRectのコンストラクタです。新しいオブジェクトを作成します。
- DOMRect.height
- heightは、DOMRectのプロパティです。矩形の高さを返します。
- DOMRect.x
- xは、DOMRectのプロパティです。矩形の水平方向の位置を返します。水平方向の位置は、ドキュメントの左端からの距離です。
- DOMRect.y
- yは、DOMRectのプロパティです。矩形の垂直方向の位置を返します。垂直方向の位置は、ドキュメントの上端からの距離です。