Поворот и изображение холста на определенный пользователем угол

Question

Поворот и изображение холста на определенный пользователем угол

0

Я хочу повернуть изображение с помощью заданного пользователем угла, который будет определяться ползунком ввода, который находится в диапазоне от -90deg до 90deg. В основном требование состоит в том, чтобы выровнять изображение на холсте.

Это то, что я пробовал использовать angularjs

мой ползунок ввода и html:

Straighten: <input type="range" id="rotateImage" value="0" min="-90" max="90" step="1" ng-model="rotateAngle"/>
<div id="imageCanvas">
    <canvas id="canvas"></canvas>
</div>

мой контроллер:

$scope.$watch('rotateAngle', function(newVal, oldVal) {
if (newVal) {
    rotate(newVal)
}
})

function rotate(rotAngle) {
console.log('rotate angle>> ', rotAngle);
var imageCanvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");
var gridWidth = imageCanvas.width,
    gridHeight = imageCanvas.height;
var deg = Math.PI / 180;

context.translate(gridWidth / 2, gridHeight / 2);
context.rotate(rotAngle * deg);
}

Также я рисую сетку поверх холста для справки

$scope.Straighten = function() {
var imageCanvas = document.getElementById("canvas"),
    gridWidth = imageCanvas.width,
    canvasWidth = gridWidth,
    gridHeight = imageCanvas.height,
    canvasHeight = gridHeight,
    gridPadding = 1;

var gridCanvas = $('<canvas id=gridLayer></canvas>').attr({
    width: canvasWidth,
    height: canvasHeight
}).appendTo('#imageCanvas');
var context = gridCanvas.get(0).getContext("2d");
drawGridBoard(gridWidth, gridHeight, gridPadding, context);
}

function drawGridBoard(gridWidth, gridHeight, gridPadding, context) {
for (var x = 0; x <= gridWidth; x += 40) {
    context.moveTo(0.5 + x + gridPadding, gridPadding);
    context.lineTo(0.5 + x + gridPadding, gridHeight + gridPadding);
}


for (var x = 0; x <= gridHeight; x += 40) {
    context.moveTo(gridPadding, 0.5 + x + gridPadding);
    context.lineTo(gridWidth + gridPadding, 0.5 + x + gridPadding);
}

context.strokeStyle = "blue";

context.setLineDash([15, 5]);
context.stroke();

}

Я могу получить угол, по которому изображение должно быть повернуто, но изображение не получает рутирования. Пожалуйста помоги

steffi.m 14 июль 2015, в 17:52

Источник

Теги:

javascript

jquery

angularjs

html5

canvas

1 ответ

Ещё вопросы

Vineet · Accepted Answer · 2015-07-14T14-47-00.000Z

Я работаю на холсте с двух недель. Я обновляю функцию вращения. Возможно, вам придется подождать, пока изображение не будет загружено, прежде чем рисовать его. Пожалуйста, напишите ниже код

function rotate(rotAngle) {
    console.log('rotate angle>> ', rotAngle);
    var canvas= document.getElementById("canvas"),
    context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height); //Clear the canvas first

    var logoImg = new Image(); // Create instance of the Image class
    logoImg.src = item.image; // Tell the Image relative url

    var gridWidth = canvas.width,
    var gridHeight = canvas.height;
    var deg = Math.PI / 180;


    logoImg.onload = function () {

                context.save();
                context.translate(gridWidth / 2, gridHeight / 2);

                context.rotate(rotAngle * Math.PI / 180);

                context.drawImage(logoImg, -(gridWidth / 2), -(gridHeight / 2));

                context.restore();
            };

}

Над кодом работал для меня.

Большое вам спасибо :) это сработало отлично. Но моя единственная проблема сейчас. дополнительные пробелы, которые мы получаем при вращении. Как я могу заполнить это, увеличив изображение, чтобы заполнить пространство, а также иметь возможность панорамирования изображения?
Если вы видите, что мой ответ достаточно хорош, пожалуйста, не забудьте высказать свое мнение. Для вашего следующего запроса, пожалуйста, создайте скрипку, чтобы я мог видеть себя?