Canvas. Манипуляции с большим изображением
Всех приветствую. Нужна помощь.
Есть canvas 500 х 500 Есть слой с картинкой 2000 х 1500. Не получается сделать вращение слоя с картинкой в центре canvas-a после перемещений этого слоя. Нужно дать возможность выбрать любой участок изображения, развернуть его, как понадобится, с возможностью масштабирования без ограничения повторов этих действий. Чувствую, что дело в тригонометрии, но не могу ни как решить эту задачу Наверняка уже кто-то с таким сталкивался, очень нужна помощь |
Михаил_,
подожду переводчика или пример. |
Цитата:
Это мой первый опыт с canvas-ом, но все равно не ожидал, что упрусь так плотно |
Михаил_,
я не понимаю что вы хотите сделать. |
Цитата:
В canvas-e показывается участок большого изображения, пользователь выбирает нужный ему участок по своему усмотрению перемещая, вращая, масштабируя большое изображение. Размеры canvas-a не изменяются. При начальной загрузке картинки, центр canvas-a и центр картинки совмещены. У меня все уперлось в совмещение центра canvas-a и центра вращения большого изображения после однократного перемещения и поворота картинки. Удалось решить эту проблему для однократного перемещения и поворота изображения, но после повторного перемещения совместить центр canvas-a и новый центр вращения картинки не получается ну ни как. Не могу понять алгоритм совмещения центра canvas-a с новым центром вращения изображения после многократных перемещений и вращений, пока без масштабирования, даже. Учитывая, что предыдущий центр вращения картинки может быть смещен, при ее перемещении пользователем, далеко за рамки canvas-a Уже мозги кипят. Повторюсь, картинка размещена в отдельном слое в canvas-e |
Михаил_,
не могу помочь, не понимаю. |
Цитата:
Автор ищет синус и не может найти )). Ну а по хорошему такие задачи правильно решать с помощью сложения матриц трансформации после каждой операции смещения вращения. |
Цитата:
Цитата:
И вопрос, можно ли будет, после решения всех этих проблем сохранять текущее положение изображения, центров и других объектов с возможностью последующей загрузки? Без этого все усилия теряют смысл |
Примерно так...
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
background: black;
}
form {
display: grid;
grid-template-columns: 1fr 2fr;
margin: 1em;
align-self: flex-start;
align-items: center;
grid-gap: .5em;
}
form label {
display: contents;
}
body {
display: flex;
flex-flow: wrap;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<form>
<label>
angle
<input type="range" id="angle" value="0" min="-180" max="180" step="any">
</label>
<label>
cropX
<input type="number" id="cropX" value="850" step="1">
</label>
<label>
cropY
<input type="number" id="cropY" value="600" step="1">
</label>
<label>
cropWidth
<input type="number" id="cropWidth" value="300" step="1">
</label>
<label>
cropHeight
<input type="number" id="cropHeight" value="300" step="1">
</label>
<label>
scale
<input type="range" id="scale" value="1" min="0.1" max="5" step="any">
</label>
</form>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var image = new Image();
image.src = "https://placeimg.com/2000/1500/any";
image.onload = applyInputs;
document.addEventListener("input", applyInputs);
function applyInputs() {
crop(ctx, image, $.reduce((m, { id, value }) => Object.assign(m, { [id]: value }), {}));
}
var $ = "cropX cropY cropWidth cropHeight scale angle"
.split(/\s+/)
.map(id => document.getElementById(id));
function crop(ctx, image, { cropX, cropY, cropWidth, cropHeight, scale, angle }) {
ctx.save();
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.translate(.5 * ctx.canvas.width, .5 * ctx.canvas.height);
ctx.rotate(angle * Math.PI / 180);
ctx.save();
ctx.globalAlpha = 0.125;
ctx.scale(scale, scale);
ctx.translate(-.5 * cropWidth - cropX, -.5 * cropHeight - cropY);
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);
ctx.restore();
ctx.save();
ctx.scale(scale, scale);
ctx.translate(-.5 * cropWidth - cropX, -.5 * cropHeight - cropY);
ctx.drawImage(image, cropX, cropY, cropWidth, cropHeight, cropX, cropY, cropWidth, cropHeight);
ctx.restore();
ctx.restore();
}
</script>
</body>
</html>
В общем главная тут функция crop (строки 77-97), остальное чтобы показать, как оно действует Если это действует так как нужно, то достаточно сохранить { cropX, cropY, cropWidth, cropHeight, scale, angle }, чтобы потом заново восстановить картинку. |
:-? всем спасибо ...
|
| Часовой пояс GMT +3, время: 19:11. |