WPF: Как избежать выхода изображения за пределы Canvas? - PullRequest
6 голосов
/ 11 марта 2011

У меня есть холст в качестве средства просмотра изображений.Его фон используется для размещения изображения, и я хотел бы поместить другое изображение поверх него.Итак, сценарий такой:

 <Canvas Name="VisorCanvas"  Height="514"  Width="720">
   <Canvas.Background>
   <ImageBrush />
   </Canvas.Background>
   <Image Name="foreground"  />
</Canvas>

Я динамически вставляю изображения в код позади (C #).

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

  • В любом случае изображение квадрата будет изменено..
  • , если он меньше, чем размеры холста, я просто покажу его.
  • , если он больше в каком-либо измерении (ширина или высота), мне нужно либо обрезать его, либо установить прозрачную часть изображения,При этом я получаю режим ТВ или что-то в этом роде, поскольку фигура всегда будет казаться «внутри» холста (хотя часть обрезана)

Как я могу это сделать?Я пытался:

  • Чтобы обрезать изображение с помощью CroppedBitmap, но это не точно.
  • Чтобы использовать прозрачность через дополнительное изображение opacityMask, но мне нужно создать маскурастровое изображение (с прозрачностью) от исходного, и я не знаю, как это сделать.
  • Чтобы создать «фотографию» с помощью RenderTargetBitmap и заменить изображение результатом этого метода, но я не смогт.

Буду признателен, если кто-нибудь сможет пролить на него свет.

1 Ответ

26 голосов
/ 11 марта 2011

Установите ClipToBounds="True" в элементе Canvas, и это остановит выход изображения за границы холста.

Возможно, вы также захотите не использовать элемент Image.Вы можете использовать Rectangle с Fill, установленным на ImageBrush, потому что затем вы можете использовать свойства Viewbox и Viewport, чтобы выбрать, какую часть исходного изображения вы хотите, и размер выходногохочу.(Установите ViewportUnits на Absolute, чтобы точно контролировать размеры окрашиваемой области.)

...