Рассчитать новую ширину при перекосе на холсте - PullRequest
Новая
       27

Рассчитать новую ширину при перекосе на холсте

1 голос
/ 14 февраля 2012

Я использую canvas для проекта, и у меня есть несколько элементов, которые я искажаю.Я искажаю только значение y и просто хочу узнать, какова будет новая ширина изображения после перекоса (чтобы я мог выровнять его с другим элементом canvas).Посмотрите на приведенный ниже код, чтобы понять, что я имею в виду 

ctx.save();
//skew the context
ctx.transform(1,0,1.3,0,0,0);
//draw two images with different heights/widths
ctx.drawImage(image,0,0,42,60);
ctx.drawImage(image,0,0,32,25);

Цель состоит в том, чтобы узнать, что изображение 42 на 60 теперь стало изображением X на 60, поэтому я мог сделать некоторый перевод, прежде чем нарисовать его в 0,0.Достаточно просто измерить каждое изображение отдельно, но у меня есть разные значения перекоса и высоты / ширины по всему проекту, которые необходимо выровнять.В настоящее время я использую этот код (работает прилично для изображений шириной от 25 до 42): 

var skewModifier = imageWidth*(8/6)+(19/3);
var skewAmount = 1.3; //this is dynamic in my app
var width = (skewModifier*skewAmount)+imageWidth;

Поскольку изображения становятся шире, хотя эта формула быстро разваливается (я думаю, что это наклонная формула, а не прямое значение, как эта).Любые идеи о том, что холст делает для перекоса?

Ответы [ 2 ]

7 голосов
/ 15 февраля 2012

Вы должны быть в состоянии вывести его математически.Я полагаю:

Math.atan(skewAmount) - это угол в радианах, в котором что-то перекошено относительно начала координат.

Таким образом, значение 1,3 сместит объект на 0,915 радиана или 52 градуса.

Итак, вот красный неискошенный объект рядом с тем же перекошенным объектом (окрашен в зеленый цвет).Итак, у вас есть прямоугольный треугольник:

enter image description here

Мы знаем исходный угол (0,915 радов) и знаем длину соседней стороны, которая составляет 60 и 25 для двух ваших изображений.(высота красного цвета).

Гипотенуза - это перекошенная длинная сторона.

А противоположная сторона - это дно треугольника - насколько оно перекошено!

Касательная получаетмы противоположные / соседние, если я помню, поэтому для первого:

tan(0.915) = opposite / 60, решение для противоположного в коде JavaScript у нас есть:

opposite = Math.tan(0.915)*60

Итакнижняя сторона перекошенного объекта начинается примерно на 77 пикселей от начала координат.Давайте посмотрим на нашу работу на холсте:

http://jsfiddle.net/LBzUt/

Хорошо выглядит для меня!

Треугольник, о котором идет речь, это, конечно, происхождение холста, эту черную точку, которую я нарисовали в левом нижнем углу красного прямоугольника, который является исходной позицией, которую мы ищем перед перекосом.

Это было немного случайным объяснением.Есть вопросы?

2 голосов
/ 11 октября 2012

Взяв пример скрипки Саймона на шаг вперед, вы можете просто ввести градусы:

Вот скрипка http://jsfiddle.net/LBzUt/33/

...