Createjs: Как повернуть растровое изображение и обрезать его, используя sourcerect, не поворачивая sourcerect? - PullRequest
Новая
       65

Createjs: Как повернуть растровое изображение и обрезать его, используя sourcerect, не поворачивая sourcerect?

2 голосов
/ 12 июня 2019

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

Существует ли способ поворота растрового изображения без поворота исходного изображения, чтобы прямоугольник обрезанного изображения не вращался?

До сих пор мне удавалось поворачивать растровое изображение до определенной степени вокруг его центра.После вращения также поворачивается источник вправо (и на этот раз не вокруг его центра).

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

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

let aBitmap= new window.createjs.Bitmap(IMG_SOURCE);
let nSpecificAngle = (Math.PI*2 / 37 * 5) * 180/Math.PI;

aBitmap.rotation = nSpecificAngle;
aBitmap.regX = aBitmap.image.width / 2;
aBitmap.regY = aBitmap.image.height / 2;
aBitmap.x = 0;
aBitmap.y = 0;

aBitmap.sourceRect = new window.createjs.Rectangle(0, 0, 200, 200);

Я ожидаю повернуть растровое изображение, но не исходное, поэтому я могу обрезать растровое изображение в не повернутом прямоугольнике.

Ответы [ 2 ]

1 голос
/ 12 июня 2019

Не уверен, что я полностью понимаю, что вы пытаетесь сделать, но вы можете попытаться создать один смещенный холст, установить его размер в соответствии с реальным размером растрового изображения (масштаб 1), затем перетащить ваш растровый файл createjs и повернуть он повернул один.

Теперь, поскольку canvas - это изображение, вы можете использовать его в качестве источника для нового растрового изображения createjs, которое вы собираетесь создать, в котором теперь будет ваша повернутая фотография ..

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

псевдокод: 

var canvas1 = new Canvas();
var canvas1stage = new createjs.easeljs.stage("c1");
canvas1stage.addChild(new createjs.Bitmap("source image").set({rotate: xx}));

var canvas2 = new Canvas();
var canvas2ctx = canvas2.getcontext2d();
canvas2ctx.draw(canvas1, x, y, w, h);

var aImg = new createjs.Bitmap(canvas2);

Если сделать это, возможно, это сработает.

0 голосов
/ 12 июня 2019

SourceRect всегда будет ориентироваться на источник.

Лучшим вариантом является использование векторной маски .Маски не преобразуются с их содержимым. 

var mask = new createjs.Shape();
mask.graphics.f("red").dr(0,0,200,200);
aBitmap.mask = mask;

Вот краткий пример: https://jsfiddle.net/73m41pca/

Приветствия,

...