Skip to content

Commit 4e4234b

Browse files
EscapedGibbonstropitek
EscapedGibbon
authored and
stropitek
committed
docs wip add geometry methods
1 parent a7c50b2 commit 4e4234b

File tree

7 files changed

+105
-5
lines changed

7 files changed

+105
-5
lines changed

‎docs/API reference/Image/Geometry/Geometry.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,5 @@ Geometric operations in image processing involve transforming the spatial coordi
99
- [Resize](Resize.md 'internal link on resize')
1010

1111
- [Rotate](Rotate.md 'internal link on rotate')
12+
13+
- [Transform](./transform.md 'internal link on transform')

‎docs/API reference/Image/Geometry/Resize.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import ResizeDemo from './resize.demo.tsx'
1717
| [`borderType`](https://image-js.github.io/image-js-typescript/interfaces/ResizeOptions.html#borderType) | no | `constant` |
1818
| [`borderValue`](https://image-js.github.io/image-js-typescript/interfaces/ResizeOptions.html#borderValue) | no | `0` |
1919
| [`height`](https://image-js.github.io/image-js-typescript/interfaces/ResizeOptions.html#height) | no | - |
20-
| [`interpolationType`](https://image-js.github.io/image-js-typescript/interfaces/ResizeOptions.html#preserveAspectRatio) | no | `bilinear` |
20+
| [`interpolationType`](https://image-js.github.io/image-js-typescript/interfaces/ResizeOptions.html#interpolationType) | no | `bilinear` |
2121
| [`preserveAspectRatio`](https://image-js.github.io/image-js-typescript/interfaces/ResizeOptions.html#preserveAspectRatio) | no | `true` |
2222
| [`width`](https://image-js.github.io/image-js-typescript/interfaces/ResizeOptions.html#width) | no | - |
2323
| [`xFactor`](https://image-js.github.io/image-js-typescript/interfaces/ResizeOptions.html#xFactor) | no | - |

‎docs/API reference/Image/Geometry/transform.demo.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Image } from 'image-js';
2+
3+
export default function transform(image: Image) {
4+
const imageMatrix = [
5+
[1, 0, 0],
6+
[0, 1, 25],
7+
];
8+
return image.transform(imageMatrix);
9+
}

‎docs/API reference/Image/Geometry/transform.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import TransformDemo from './transform.demo.tsx'
2+
3+
[Check options and parameters of transform method](https://image-js.github.io/image-js-typescript/classes/Image.html#transform 'github.io link')
4+
5+
`transform` method uses transformation matrix to rotate, translate, and/or scale the image. User needs to pass on the matrix that will be applied to the image. Matrix must have 2 rows and 3 columns:
6+
7+
$$
8+
\begin{bmatrix}
9+
1 & 2 & 3\\
10+
a & b & c
11+
\end{bmatrix}
12+
$$
13+
14+
Where the first two columns are responsible for image [rotation](https://en.wikipedia.org/wiki/Rotation 'wikipedia link on rotation') and [shear](https://en.wikipedia.org/wiki/Shear_mapping 'wikipedia link on image shearing'), while last column is responsible for image [translation](<https://en.wikipedia.org/wiki/Translation_(geometry)#:~:text=In%20Euclidean%20geometry%2C%20a%20translation,origin%20of%20the%20coordinate%20system> 'wikipedia link on translation').
15+
16+
:::caution
17+
Matrix cannot be singular. Otherwise it cannot be inverted. Click [here](https://en.wikipedia.org/wiki/Invertible_matrix 'wikipedia link on invertible matrices') to learn more.
18+
:::
19+
20+
<TransformDemo />
21+
22+
### Parameters and its default values
23+
24+
- [transformMatrix](https://image-js.github.io/image-js-typescript/classes/Image.html#transform)
25+
26+
- [options](https://image-js.github.io/image-js-typescript/interfaces/TransformOptions.html)
27+
28+
#### Options
29+
30+
| Property | Required | Default value |
31+
| ------------------------------------------------------------------------------------------------------------------------ | -------- | ------------- |
32+
| [`borderType`](https://image-js.github.io/image-js-typescript/interfaces/TransformOptions.html#borderType) | no | `constant` |
33+
| [`borderValue`](https://image-js.github.io/image-js-typescript/interfaces/TransformOptions.html#borderValue) | no | `0` |
34+
| [`fullImage`](https://image-js.github.io/image-js-typescript/interfaces/TransformOptions.html#fullImage) | no | - |
35+
| [`height`](https://image-js.github.io/image-js-typescript/interfaces/TransformOptions.html#height) | no | - |
36+
| [`interpolationType`](https://image-js.github.io/image-js-typescript/interfaces/TransformOptions.html#interpolationType) | no | `bilinear` |
37+
| [`inverse`](https://image-js.github.io/image-js-typescript/interfaces/TransformOptions.html#inverse) | no | - |
38+
| [`width`](https://image-js.github.io/image-js-typescript/interfaces/TransformOptions.html#width) | no | - |

‎docs/API reference/Image/Geometry/transformRotate.demo.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Image } from 'image-js';
2+
3+
export default function transformRotate(image: Image) {
4+
return image.transformRotate(25);
5+
}
6+
7+

‎docs/API reference/Image/Geometry/transformRotate.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import TransRotateDemo from './transformRotate.demo.tsx'
2+
3+
[Check options and parameters of transformRotate method](https://image-js.github.io/image-js-typescript/classes/Image.html#transformRotate 'github.io link')
4+
5+
`transformRotate` method rotates image anti-clockwise at any angle that user sets. It applies the same principle as [transform](./transform.md 'internal link on transform demo') method, but user only needs to pass a rotation angle as a parameter instead of the whole matrix.
6+
7+
<TransRotateDemo />
8+
9+
### Parameters and its default values
10+
11+
- [angle](https://image-js.github.io/image-js-typescript/classes/Image.html#transformRotate)
12+
13+
- [options](https://image-js.github.io/image-js-typescript/interfaces/TransformRotateOptions.html)
14+
15+
#### Options
16+
17+
| Property | Required | Default value |
18+
| ------------------------------------------------------------------------------------------------------------------------------ | -------- | ------------- |
19+
| [`borderType`](https://image-js.github.io/image-js-typescript/interfaces/TransformRotateOptions.html#borderType) | no | `constant` |
20+
| [`borderValue`](https://image-js.github.io/image-js-typescript/interfaces/TransformRotateOptions.html#borderValue) | no | `0` |
21+
| [`center`](https://image-js.github.io/image-js-typescript/interfaces/TransformRotateOptions.html#center) | no | `center` |
22+
| [`fullImage`](https://image-js.github.io/image-js-typescript/interfaces/TransformRotateOptions.html#fullImage) | no | - |
23+
| [`height`](https://image-js.github.io/image-js-typescript/interfaces/TransformRotateOptions.html#height) | no | - |
24+
| [`interpolationType`](https://image-js.github.io/image-js-typescript/interfaces/TransformRotateOptions.html#interpolationType) | no | `bilinear` |
25+
| [`inverse`](https://image-js.github.io/image-js-typescript/interfaces/TransformRotateOptions.html#inverse) | no | - |
26+
| [`scale`](https://image-js.github.io/image-js-typescript/interfaces/TransformRotateOptions.html#scale) | no | `1` |
27+
| [`width`](https://image-js.github.io/image-js-typescript/interfaces/TransformRotateOptions.html#width) | no | - |
28+
29+
:::info
30+
Technically, `transform` method can still be applied to rotate an image. It's just harder.
31+
This means that ,to rotate an image by 90 degrees anti-clockwise, you can use `transform` method like this:
32+
33+
```js
34+
const center = image.getCoordinates('center');
35+
return image.transform([
36+
[0, 1, center.column - center.row],
37+
[-1, 0, center.column + center.row],
38+
]);
39+
```
40+
41+
Or use `transformRotate` method like this:
42+
43+
```js
44+
return image.transformRotate(90);
45+
```
46+
47+
`transformRotate` just facilitates this process.
48+
:::

‎docs/API reference/Mask/subtract.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,6 @@ mask = mask.subtract(mask2);
1616
Masks must have the same size for compatibility reasons.
1717
:::
1818

19-
:::info
20-
Mask method calls already preexisting `subtract` function. To learn more about how the function works click on this link(link)
21-
:::
22-
2319
### Parameters and default values
2420

2521
- [`mask`](https://image-js.github.io/image-js-typescript/classes/Mask.html#subtract 'github.io link')

0 commit comments

Comments
 (0)