https://github.com/splincode/snapsvg
перевод API
https://github.com/splincode/snapsvg
Last synced: about 1 year ago
JSON representation
перевод API
- Host: GitHub
- URL: https://github.com/splincode/snapsvg
- Owner: splincode
- Created: 2016-08-04T18:14:16.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-09-02T10:19:56.000Z (almost 9 years ago)
- Last Synced: 2024-10-06T12:42:06.657Z (over 1 year ago)
- Language: JavaScript
- Size: 34.2 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# snapsvg
перевод API - http://snapsvg.io/docs/
### Инициализация холста
```html
Document
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%; width: 100%;
}
````
```javascript
var s = Snap("#draw"); // теперь можем обращаться к холсту
```
### Перевод радиан в градусы и обратно
```javascript
Snap.rad(90); // 1.5707963267948966
Snap.deg(1.5707963267948966) // 90
```
### Угол между двумя точками
```javascript
Snap.angle(10, 10, 0, 0) // 45
```
### Привязка к сетке [ Snap.snapTo() ]
```javascript
var gridSize = 50;
var orig = {
x: 0,
y: 0
};
var block = s.rect(100, 100, 100, 100, 20, 20);
block.attr({
fill: "rgb(236, 240, 241)",
stroke: "#1f2c39",
strokeWidth: 3
});
block.drag(
function (dx, dy, x, y, e) {
var xSnap = Snap.snapTo(gridSize, orig.x + dx, 100000000);
var ySnap = Snap.snapTo(gridSize, orig.y + dy, 100000000);
this.attr({
x: xSnap,
y: ySnap
});
},
function (x, y, e) {
orig.x = e.toElement.x.baseVal.value;
orig.y = e.toElement.y.baseVal.value;
}
);
```
### Получение RGB-модели
```javascript
Snap.getRGB('#f5f5f5');
// Object {r: 245, g: 245, b: 245, hex: "#f5f5f5", opacity: 1}
```
### Выборка DOM(SVG)-элемента
```javascript
var circle = s.circle(90,120,80); // черный круг
/*
Так как в SVG холсте появился DOM элемент cirlce,
к нему можно обращаться и вызывать методы Snap
*/
Snap.select("circle").attr({"fill": "#b5b5b5"}); // серый круг
```
### Получение узла DOM(SVG)-элемента
```javascript
var circle = s.circle(100, 100, 50);
circle.node.onclick = function () {
circle.attr("fill", "red"); // по клику, круг станет красным
};
```
### Изменение параметров DOM(SVG)-элемента
```javascript
var circle = s.circle(100, 100, 50);
circle.attr({
fill: "#fc0", // цвет фона
stroke: "#000", // цвет границы
strokeWidth: 2, // ширина границы
"fill-opacity": 0.5, // прозрачность
});
console.log(circle.attr("fill")); // rgb(255, 204, 0)
```
### Ограничительная рамка DOM(SVG)-элемента
```javascript
var circle = s.circle(100, 100, 50);
circle.attr({
fill: "#fc0", // цвет фона
stroke: "#000", // цвет границы
strokeWidth: 2, // ширина границы
"fill-opacity": 0.5, // прозрачность
});
console.log(circle.getBBox())
/*
Object {
cx:100,
cy:100,
h:100,
height:100,
path:Array[5],
r0:70.76344413517704,
r1:50,
r2:50.0745946151571,
vb:"49.925405384842904 50 100.1491892303142 100",
w:100.1491892303142,
width:100.1491892303142,
x:49.925405384842904,
x2:150.0745946151571,
y:50,
y2:150
}
*/
```
### Получение значения в px
```javascript
var circle = s.circle(100, 100, 50);
circle.attr({
fill: "#fc0", // цвет фона
stroke: "#000", // цвет границы
strokeWidth: 2, // ширина границы
"fill-opacity": 0.5, // прозрачность,
x: 100,
y: 150
});
console.log(circle.asPX('cx')); // 100
```