doctype html html lang uk head meta charset UTF-8 title Генератор пані

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Генератор паніні</title>
<link rel="stylesheet" href="css/style.css">
<!--TODO Replace with minimised-->
<script src="lib/svg.js"></script>
<script src="lib/svg.draggable.min.js"></script>
<script src="lib/svg.export.min.js"></script>
<script src="lib/img-base64.js"></script>
<script src="js/script.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="paper"></div>
<div id="card"></div>
<button>Save</button>
<script>
var draw = SVG('card');
var stamps = [];
//TODO Appearing animation this.instance.animate().opacity(.5)
for (var i = 0; i < 10; i++) {
var encodedImg;
imgToDataURL('merci/0' + (i + 1) + '.png', function (err, txt) {
encodedImg = txt;
console.log(txt);
});
var img = draw.image('merci/0' + (i + 1)/*Random.int(10)*/ + '.png', 200, 70)
.x(Random.int(100) + 30)
.y(i * 70)
.attr('class', 'stamp');
var cardBounds = function (x, y) {
return {
x: x > 0 && x < 200,
y: y > 0 && y < 650
}
};
img.draggable(cardBounds);
img.dragstart = function (e) {
this.opacity(0.3);
};
var transformVal = [0, 0];
img.beforedrag = function (e) {
if (e.target.attributes.transform != undefined) {
transformVal = e.target.attributes.transform.value.match(/-?\d+/g).map(parseFloat);
}
};
img.dragmove = function (delta, event) {
var stamp = this,
rightClick = (event.button === 2),
allowedRotation = delta.y >= -90 && delta.y <= 90;
// stamp.translate(transformVal[0] > 0 ? transformVal[0] / 2 : -transformVal[0],
// transformVal[1] > 0 ? 0 : -transformVal[1]);
if (rightClick) {
if (allowedRotation) {
stamp.transform({
rotation: delta.y,
x: -delta.x,
y: -delta.y
});
}
if (delta.x != 0 || delta.y != 0) {
stamp.transform({
x: -(delta.x || 0),
y: -(delta.y || 0)
});
}
}
};
img.dragend = function () {
this.opacity(1);
};
stamps.push(img);
}
for (var i = 0; i < stamps.length - 1; i++) {
var a = stamps[i].node;
var b = stamps[i + 1].node;
//shiftUnless(a, b, stamps[i + 1]);
console.log(!Stamps.intersect(a, b) ? "yay :)" : ":(");
}
function shiftUnless(a, b, el) {
while (Stamps.intersect(a, b)) {
//TODO Shift in another direction, rotate 90deg
for (var i = 0; (i < 10) || !Stamps.intersect(a, b); i++) {
el.dx(1);
if (!Stamps.intersect(a, b)) return;
}
for (var i = 0; (i < 10) || !Stamps.intersect(a, b); i++) {
el.dy(1);
if (!Stamps.intersect(a, b)) return;
}
}
}
$('button').on('click', function () {
var svgExport = draw.exportSvg();
console.log(svgExport);
})
</script>
</body>
</html>