Как установить 100% высоту Konva fillPatternImage

Я использую Konva (в React).

  <Rect
    x={x}
    y={y}
    width={width}
    height={height}
    ...
    fillPatternImage={this.state.image}
    fillPatternRepeat="repeat-x"
  />

Отображается заполненное изображение, которое повторяется, но его высота является начальной высотой моего исходное изображение. Я хотел бы "подогнать" его под мою форму (высота вроде 100% / Y обложки).

В документе (fillPatternX, fillPatternOffsetX, fillPatternScaleX) есть много функций, но никто не ищет то, что я хочу.

Как я могу сделать ?


person Julien Malige    schedule 10.09.2018    source источник
comment
Можете уточнить, что вы хотите увидеть в результате? Наверное fillPatternScaleY у вас сработает.   -  person lavrton    schedule 11.09.2018
comment
Я использую трансформатор. Я хочу, чтобы моя заливка покрывала область (100% 100%) во время трансформации.   -  person Julien Malige    schedule 11.09.2018
comment
Можете ли вы сделать онлайн-демонстрацию того, что у вас уже есть?   -  person lavrton    schedule 11.09.2018
comment
Сначала попробую с ScaleY, думаю, вы правы. Если не получится, сделаю скрипку :).   -  person Julien Malige    schedule 11.09.2018
comment
@lavrton Вы были правы !! fillPatternScaleY = {высота / patternImageHeight}. Если вы хотите добавить ответ, я его приму!   -  person Julien Malige    schedule 11.09.2018


Ответы (1)


Вы можете использовать fillPatternScaleX и fillPatternScaleY для масштабирования изображения узора до необходимого размера. Возможно, вам понадобится знать исходный размер изображения вашего выкройки, чтобы рассчитать масштаб.

fillPatternScaleY={requiredHeight / patternImageHeight}

person lavrton    schedule 11.09.2018