создать JS (реагировать), как реализовать масштабирование центральной точки? - PullRequest
Новая
       34

создать JS (реагировать), как реализовать масштабирование центральной точки?

0 голосов
/ 03 февраля 2020

У меня html шаблонов с изображениями. И нужно реализовать масштабирование с центральной точкой.

Фейдер зума: 

  renderImageResize({input}) {
    return (
        <div className="d-flex justify-content-center">
            <input onChange={(e) => {
                this.onChangeImageSize(-1, e);
                input.onChange(e.target.value)
            }} defaultValue={0} id="resizeImage" type="range" min="1" max="100"/>
        </div>
    );
}

Добавить изображение: 

function replace_image(imgUrl) {
var img = new Image();
img.onload = function () {
    const elementName = "mcImageHolder";
    let element = stage.children.find(f=>f.hasOwnProperty(elementName));
    element[elementName].mcPhotoicon.visible = false;
    element[elementName].shape.graphics.clear();
    var matrix = new createjs.Matrix2D();

    matrix.a = (element[elementName].shape.x * 2) / img.width;
    matrix.d = (element[elementName].shape.y * 2) / img.height;

    matrix.tx = -1 * element[elementName].shape.x;
    matrix.ty = -1 * element[elementName].shape.y;

    element[elementName].shape.graphics.beginBitmapFill(img, "no-repeat", matrix)
        .drawRect(-1 * element[elementName].shape.x, -1 * element[elementName].shape.y, element[elementName].shape.x * 2, element[elementName].shape.y * 2);

};
img.src = imgUrl;

}

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

function resize_image(val, image) {
const elementName = "mcImageHolder";
let element = stage.children.find(f=>f.hasOwnProperty(elementName));
    element[elementName].scaleX  = val/10;
    element[elementName].scaleY  = val/10;

}

...