diff --git a/files/en-us/web/api/domquad/domquad/index.md b/files/en-us/web/api/domquad/domquad/index.md new file mode 100644 index 000000000000000..38374e1a88bcb3e --- /dev/null +++ b/files/en-us/web/api/domquad/domquad/index.md @@ -0,0 +1,66 @@ +--- +title: "DOMQuad: DOMQuad() constructor" +short-title: DOMQuad() +slug: Web/API/DOMQuad/DOMQuad +page-type: web-api-constructor +browser-compat: api.DOMQuad.DOMQuad +--- + +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} + +The **`DOMQuad()`** constructor +creates and returns a new {{domxref("DOMQuad")}} object, given the values for some or +all of its properties. + +You can also create a `DOMQuad` by calling the +{{domxref("DOMQuad.fromRect()")}} or {{domxref("DOMQuad.fromQuad()")}} static function. That function accepts any object with the required parameters, including a `DOMQuad`, {{domxref("DOMPoint")}} or +{{domxref("DOMPointReadOnly")}}. + +## Syntax + +```js-nolint +new DOMQuad() +new DOMQuad(p1) +new DOMQuad(p1, p2) +new DOMQuad(p1, p2, p3) +new DOMQuad(p1, p2, p3, p4) +``` + +### Parameters + +- `p1` {{optional_inline}} + - : The `p1` {{domxref("DOMPoint")}} for the new `DOMQuad`. +- `p2` {{optional_inline}} + - : The `p2` {{domxref("DOMPoint")}} for the new `DOMQuad`. +- `p3` {{optional_inline}} + - : The `p3` {{domxref("DOMPoint")}} for the new `DOMQuad`. +- `p4` {{optional_inline}} + - : The `p4` {{domxref("DOMPoint")}} for the new `DOMQuad`. + +## Examples + +This example creates a `DOMQuad` using a {{domxref("DOMPoint")}} and three additional points defined as objects. + +```js +const point = new DOMPoint(2, 0); +const quad = new DOMQuad( + point, + { x: 12, y: 0 }, + { x: 12, y: 10 }, + { x: 2, y: 10 }, +); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("DOMPoint")}} +- {{domxref("DOMRect")}} +- {{domxref("DOMMatrix")}} diff --git a/files/en-us/web/api/domquad/getbounds/domquad.svg b/files/en-us/web/api/domquad/getbounds/domquad.svg new file mode 100644 index 000000000000000..06c9d497a95c873 --- /dev/null +++ b/files/en-us/web/api/domquad/getbounds/domquad.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/files/en-us/web/api/domquad/getbounds/index.md b/files/en-us/web/api/domquad/getbounds/index.md new file mode 100644 index 000000000000000..3f69c54612ec266 --- /dev/null +++ b/files/en-us/web/api/domquad/getbounds/index.md @@ -0,0 +1,53 @@ +--- +title: "DOMQuad: getBounds() method" +short-title: getBounds() +slug: Web/API/DOMQuad/getBounds +page-type: web-api-instance-method +browser-compat: api.DOMQuad.getBounds +--- + +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} + +The {{domxref("DOMQuad")}} method +`getBounds()` returns a {{domxref("DOMRect")}} object representing the smallest rectangle that fully contains the `DOMQuad` object. + +## Syntax + +```js-nolint +getBounds() +``` + +### Parameters + +None. + +### Return value + +A {{domxref("DOMRect")}} with the x, y, width, and height properties, defining the bounding box for the `DOMQuad` based on its corner coordinates. + +## Examples + +This example creates a {{domxref("DOMQuad")}} with four points, then retrieves its bounding rectangle. + +```js +const quad = new DOMQuad( + { x: 40, y: 25 }, + { x: 180, y: 8 }, + { x: 210, y: 150 }, + { x: 10, y: 180 }, +); + +const quadBounds = quad.getBounds(); +``` + +![An irregular quadrilateral with none of the sides being vertical or horizontal. Its four corners are marked with red circles. Around this quadrilateral is a dashed rectangle. All sides of this rectangle are vertical or horizontal and tangent the quadrilateral.](./domquad.svg) + +The figure shows an irregular quadrilateral represented by a {{domxref("DOMQuad")}}. The four red colored circles represent the {{domxref("DOMPoint")}} attributes `p1` to `p4`. The dashed rectangle represents the bounding rectangle returned by the `getBounds()` method of the {{domxref("DOMQuad")}}. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/domquad/tojson/index.md b/files/en-us/web/api/domquad/tojson/index.md new file mode 100644 index 000000000000000..0c17817fb6b0798 --- /dev/null +++ b/files/en-us/web/api/domquad/tojson/index.md @@ -0,0 +1,60 @@ +--- +title: "DOMQuad: toJSON() method" +short-title: toJSON() +slug: Web/API/DOMQuad/toJSON +page-type: web-api-instance-method +browser-compat: api.DOMQuad.toJSON +--- + +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} + +The {{domxref("DOMQuad")}} method +`toJSON()` returns a +{{Glossary("JSON")}} representation of the `DOMQuad` object. + +## Syntax + +```js-nolint +toJSON() +``` + +### Parameters + +None. + +### Return value + +A new object whose properties are set to the values in the +`DOMQuad` on which the method was called. + +## Examples + +This example creates a {{domxref("DOMQuad")}} with four {{domxref("DOMPoint")}} objects representing the corners of the current window, in screen coordinates, then converts that to JSON. + +```js +const topLeft = new DOMPoint(window.screenX, window.screenY); +const topRight = new DOMPoint( + window.screenX + window.innerWidth, + window.screenY, +); +const bottomLeft = new DOMPoint( + window.screenX, + window.screenY + window.innerHeight, +); +const bottomRight = new DOMPoint( + window.screenX + window.innerWidth, + window.screenY + window.innerHeight, +); + +const quad = new DOMQuad(topLeft, topRight, bottomRight, bottomLeft); + +const quadJSON = quad.toJSON(); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}}