динамические преобразования пути клипа для заполнения контейнера - PullRequest
Новая
       25

динамические преобразования пути клипа для заполнения контейнера

0 голосов
/ 10 февраля 2019

Я работаю над компонентом реагирования. Я хотел бы иметь возможность передавать любое изображение вместе с его размерами, траекторией отсечения, рассчитанной по ширине x, y и высоте для прямоугольной области.Эта часть у меня хорошо работает.Затем я хотел бы масштабировать эту обрезанную область обратно, чтобы заполнить элемент div, на данный момент у меня есть этот элемент div только с исходными размерами изображения, чтобы сделать его простым.Я правильно вычисляю масштабную часть, но не могу разобраться с математикой, чтобы перевести масштабированную область пути клипа.Вот мой компонент (в Typescript): 


interface RootProps {
  links: Link[];
}

interface RootState {

}

class Root extends React.Component<RootProps, RootState> {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

    pp = (x: number, y: number): string => {
        return x + "% " + y + "%"
    }


    renderClippedImage = (name: string, x: number, y: number, width: number, height: number) => {
        let iWidth = 600;
        let iHeight = 360;

        let p1 = {
            x: (x / iWidth) * 100,
            y: (y / iHeight) * 100
        }
        let p2 = {
            x: (x / iWidth) * 100,
            y: ((y + height) / iHeight) * 100
        }
        let p3 = {
            x: ((x + width) / iWidth) * 100,
            y: ((y + height) / iHeight) * 100
        }
        let p4 = {
            x: ((x + width) / iWidth) * 100,
            y: (y / iHeight) * 100
        }


        let clipPathString = 'polygon(' +
            this.pp(p1.x, p1.y) + ', ' +
            this.pp(p2.x, p2.y) + ', ' +
            this.pp(p3.x, p3.y) + ', ' +
            this.pp(p4.x, p4.y) + ')';

        let pX = (x) / iWidth;
        let pY = (y) / iHeight;
        let portionCoverageX = (width) / iWidth;
        let portionCoverageY = (height) / iHeight;

        let scaleX = 1;
        let scaleY = 1;
        if (portionCoverageX > 0) {
            scaleX = 1 / portionCoverageX;
        }
        if (portionCoverageY > 0) {
            scaleY = 1 / portionCoverageY;
        }

        let translateX = -(((pX * scaleX) / 2) * 100); //this doesn't work
        let translateY = 0; //similar issues getting this to work

        let pathClipping = {
            WebkitClipPath: clipPathString,
            clipPath: clipPathString,
            transform: 'translateX(' + translateX + '%) translateY(' + translateY + '%) scaleX(' + scaleX + ') scaleY(' + scaleY + ')'
        }

        console.log({
            name: name,
            pX: pX,
            pY: pY,
            portionCoverageX: portionCoverageX,
            portionCoverageY: portionCoverageY,
            scaleX: scaleX,
            scaleY: scaleY,
            translateX: translateX,
            translateY: translateY
        })

        return (
            <div style={{ textAlign: 'center', width: '100%', backgroundColor: 'lightseagreen' }}>
                <b>{name}</b><br />
                <div style={{ display: 'inline-block', width: 640, height: 360, backgroundColor: 'darkslateblue' }}>
                    <img width="640" height="360" src="https://placekitten.com/640/360" style={pathClipping} />
                </div>
            </div>
        )
    }

    render() {
        return (
            <div style={{textAlign: 'center'}}>
        <b>Original</b><br />
                <img width="640" height="360" src="https://placekitten.com/640/360" />
                <br />
                {this.renderClippedImage("one", 80, 100, 200, 100)}
                <br />
                {this.renderClippedImage("two", 50, 50, 150, 100)}
                <br />
                {this.renderClippedImage("three", 300, 10, 300, 340)}
            </div>
        )
    }

}

ReactDOM.render(<Root />, document.getElementById('mount-node'));

А вот кодовая ручка, где вы можете видеть, моя текущая математика фактически работает для сценария 3, но она должна работать для 1, 2 и любых другихзаконный регион комбо, а также.

https://codepen.io/anon/pen/xMWGRO

Конкретная строка, с которой, я думаю, я борюсь, состоит в следующем: 

let translateX = (((pX * iWidth) / 2)); //this doesn't work for all examples

translateY - аналогичная проблема, любая помощь будет наиболее ценной.

1 Ответ

0 голосов
/ 10 февраля 2019

Я думаю, вы можете установить transform-origin как top left, так что вы можете иметь более простой расчет для позиций и масштаба преобразования. 

let scaleX = iWidth / width;
let scaleY = iHeight / height;

let pX = x / iWidth;
let pY = y / iHeight;
let translateX = -pX * 100 * scaleX;
let translateY = -pY * 100 * scaleY;

let pathClipping = {
  WebkitClipPath: clipPathString,
  clipPath: clipPathString,
  transformOrigin: `top left`,
  transform: `
    translate(${translateX}%, ${translateY}%)
    scale(${scaleX}, ${scaleY})
  `
};

См. codesandbox здесь

...