2021-10-17 18:26:00 +02:00
|
|
|
---
|
2021-11-06 18:20:45 +01:00
|
|
|
title: Point.translate()
|
2021-10-17 18:26:00 +02:00
|
|
|
---
|
2021-11-06 18:20:45 +01:00
|
|
|
|
2022-09-29 16:50:42 +02:00
|
|
|
The `Point.translate()` method returns a new `Point` with a [translate
|
|
|
|
transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate)
|
|
|
|
applied.
|
2021-11-06 18:20:45 +01:00
|
|
|
|
2022-09-29 16:50:42 +02:00
|
|
|
## Signature
|
2021-11-06 19:03:54 +01:00
|
|
|
|
2021-08-25 16:09:31 +02:00
|
|
|
```js
|
|
|
|
Point point.translate(float deltaX, float deltaY)
|
|
|
|
```
|
|
|
|
|
|
|
|
In other words, this will:
|
|
|
|
|
2022-02-20 14:44:38 +01:00
|
|
|
- Add `deltaX` to the point's X-coordinate
|
|
|
|
- Add `deltaY` to the point's Y-coordinate
|
2021-11-06 18:20:45 +01:00
|
|
|
|
2022-12-30 07:47:29 -08:00
|
|
|
Positive values for `deltaX` will move the point to the right.
|
2022-09-29 16:50:42 +02:00
|
|
|
Positive values for `deltaY` will move the point downwards.
|
2021-08-25 16:09:31 +02:00
|
|
|
|
2022-09-29 16:50:42 +02:00
|
|
|
## Example
|
2021-08-25 16:09:31 +02:00
|
|
|
|
2022-09-29 16:50:42 +02:00
|
|
|
<Example caption="An example of the Point.translate() method">
|
2021-08-25 16:09:31 +02:00
|
|
|
```js
|
2025-05-19 17:20:45 -07:00
|
|
|
({ Point, points, Path, paths, Snippet, snippets, macro, part }) => {
|
2022-09-29 16:50:42 +02:00
|
|
|
|
|
|
|
points.A = new Point(10, 10).setText("Point A", "text-sm")
|
|
|
|
points.B = points.A.translate(120, 60)
|
|
|
|
.setText(
|
|
|
|
"Point B is point A with a\ntranslate(120, 60)\ntransform applied",
|
|
|
|
"right text-sm"
|
|
|
|
)
|
|
|
|
.attr("data-text-dy", -6)
|
|
|
|
.attr("data-text-lineheight", 6)
|
2022-12-30 07:47:29 -08:00
|
|
|
|
2022-09-29 16:50:42 +02:00
|
|
|
snippets.A = new Snippet("x", points.A)
|
|
|
|
snippets.B = new Snippet("x", points.B)
|
2022-12-30 07:47:29 -08:00
|
|
|
|
2022-09-29 16:50:42 +02:00
|
|
|
macro("ld", {
|
|
|
|
from: points.A,
|
|
|
|
to: points.B,
|
|
|
|
text: "translate(120,60)",
|
2025-05-19 17:20:45 -07:00
|
|
|
noStartMarker: true,
|
|
|
|
force: true,
|
2022-09-29 16:50:42 +02:00
|
|
|
})
|
|
|
|
|
2025-05-19 17:20:45 -07:00
|
|
|
// Bounding box
|
|
|
|
paths.bbox = new Path()
|
|
|
|
.move(new Point(10, 10))
|
|
|
|
.move(new Point(130, 80))
|
|
|
|
|
2022-09-29 16:50:42 +02:00
|
|
|
return part
|
|
|
|
}
|
2021-08-25 16:09:31 +02:00
|
|
|
```
|
2022-09-29 16:50:42 +02:00
|
|
|
</Example>
|