Como fazer um zoom no canvas?

Question

Olá pessoal,

 

Estou inserindo retangulos, figuras, e retas no canvas. Gostaria de poder fazer um zoom com esses objetos.

Tem dois botões que informa maiz zoom e outro menos zoom.. e um textbox informando o zoom que está no momento.

 

Algué sabe como saber isso? Ou tem algum tutorial, ebook informando isto?

Answer 1

Veja se isto te dá uma idéia:

 

http://www.msdner.com/dev-archive/180/153-119-1800203.shtm

Answer 2

Olá André,

 

Tentei aqui, mas não deu certo.

 

Eu insiro os elementos no canvas, esses elementos são do tipo image e line. Mas não ta dando zoom nesses objetos.

 

Mas mesmo assim obrigado pela ajuda!

 

Abraços

Answer 3

Andre,

 

Eu consigui fazer o zoom, porém não estou conseguindo com que o ScrollViewer exiba a barra de rolagem a medida que o zoom é feito no canvas.

 

 

O esquema é assim: tenho um scrollviewer e dentro inseri o canvas, com isso insiros os objeos no canvas. Qdo faço o zoom é no canvas e os objetos aumentam ou diminui,porém o scrollViewer não mostra as barras de rolagem.

 

 

o que será que é isso?

 

Tem alguma iéia?

Answer 4

Dê uma olhada em meu post:

http://msmvps.com/blogs/bsonnino/archive/2008/01/11/zoom-no-canvas-em-wpf.aspx

Bruno

Answer 5

Olá Bruno tudo bem?

 

Andei lendo o seu artigo e tentei fazer aqui na minha aplicação. O zoom funcionou direito, mas o scrollViewer não funcionou.

 

O scrollViewer adicionei no windows mesmo, não como no seu artigo que está dentro do dockPanel. Será que é por isso?

 

Segue a baixo o codigo:

 

<Window x:Class="FluxogramaWPF.WindowPrincipal"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Fluxograma" Height="293" Width="584" WindowStyle="SingleBorderWindow" WindowState="Maximized">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="426*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="255*" />

</Grid.RowDefinitions>

<Menu Height="22" Name="menuPrincipal" VerticalAlignment="Top">

<MenuItem Header="_Arquivo">

<MenuItem Header="Novo" Click="menuItemNovo_Click"/>

<MenuItem Header="Abrir"/>

<Separator/>

<MenuItem Header="Salvar"/>

<MenuItem Header="Salvar Como..."/>

<Separator/>

<MenuItem Header="Sair" Click="menuItemSair_Click" />

</MenuItem>

<MenuItem Header="_Ferramentas">

<MenuItem Header="_Configura‡äes" Click="menuItemConfiguracoes_Click" />

</MenuItem>

</Menu>

<ToolBar Margin="0,20,0,0" Name="toolBarPaleta" Height="49" VerticalAlignment="Top">

<Button Name="btnInicio" Click="btnInicio_Click" ToolTip="In¡cio" BorderThickness="1" Padding="2" IsEnabled="True">

<DockPanel>

<Image Source="Resources/inicio.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnFim" ToolTip="Fim" Click="btnFim_Click">

<DockPanel>

<Image Source="Resources/fim.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnOperacao" ToolTip="Opera‡Æo" Click="btnOperacao_Click">

<DockPanel>

<Image Source="Resources/operacao.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnImpressao" ToolTip="ImpressÆo" Click="btnImpressao_Click">

<DockPanel>

<Image Source="Resources/exibir.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnConector" ToolTip="Conector" Click="btnConector_Click">

<DockPanel>

<Image Source="Resources/conector.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnDecisao" ToolTip="DecisÆo" Click="btnDecisao_Click">

<DockPanel>

<Image Source="Resources/condicao.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Separator/>

<Button Name="btnLinha" Click="btnLinha_Click" ToolTip="Linha" >

<DockPanel>

<Image Source="Resources/caneta.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnBorracha" ToolTip="Borrachar" >

<DockPanel>

<Image Source="Resources/borracha.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Separator/>

<Button Name="btnSeta" ToolTip="Seta" Click="btnSeta_Click">

<DockPanel>

<Image Source="Resources/flecha.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Separator/>

<Button Name="btnMenosZoom" ToolTip="Menos zoom (-)" Click="btnMenosZoom_Click">

<DockPanel>

<Image Source="Resources/zoomMenos.bmp" Width="11" Height="11"/>

</DockPanel>

</Button>

<TextBox Name="textBoxZoom" Width="50" TextAlignment="Center" BorderThickness="1" BorderBrush="Black">100%</TextBox>

<Button Name="btnMaisZoom" ToolTip="Mais zoom (+)" Click="btnMaisZoom_Click">

<DockPanel>

<Image Source="Resources/zoomMais.bmp" Width="11" Height="11"/>

</DockPanel>

</Button>

</ToolBar>

<StatusBar BorderThickness="0" Height="23" HorizontalContentAlignment="Stretch" Name="statusBarInformacao" VerticalAlignment="Bottom" VerticalContentAlignment="Bottom">

<Label BorderThickness="0" Name="labelInformacao" Padding="2">Fluxograma</Label>

</StatusBar>

<ScrollViewer Margin="0,68,0,24" Name="scrollViewerDesenho" HorizontalScrollBarVisibility="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Background="White" VerticalScrollBarVisibility="Auto">

<Canvas Height="Auto" Name="canvasDesenho" Width="Auto" Background="White" PreviewMouseLeftButtonDown="canvasDesenho_PreviewMouseLeftButtonDown" PreviewMouseMove="canvasDesenho_PreviewMouseMove" PreviewMouseLeftButtonUp="canvasDesenho_PreviewMouseLeftButtonUp">

<Canvas.LayoutTransform>

<ScaleTransform x:Name="canvasZoom" ScaleX="1" ScaleY="1" />

</Canvas.LayoutTransform>

</Canvas>

</ScrollViewer>

</Grid>

</Window>

 

Obrigado pela ajuda

Answer 6

Use o DockPanel, pois o ScrollViewer deve ter um tamanho definido. Se não tiver (como o seu não tem), as scrollbars não aparecem. No meu post tem o exemplo completo de projeto.

Bruno

Answer 7

Olá Bruno,

 

Olhei o seu tutorial e inserir um DockPanel, mas infelizmente ainda não funcionou.

 

Será porque e adicionei o dockPanel apenas no ScrollViewer, canvas?

 

Porque a barra de menu, toolbar e statusBar.

 

Olha o código:

 

<Window x:Class="FluxogramaWPF.WindowPrincipal"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Fluxograma" Height="293" Width="584" WindowStyle="SingleBorderWindow" WindowState="Maximized">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="426*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="255*" />

</Grid.RowDefinitions>

<Menu Height="22" Name="menuPrincipal" VerticalAlignment="Top">

<MenuItem Header="_Arquivo">

<MenuItem Header="Novo" Click="menuItemNovo_Click"/>

<MenuItem Header="Abrir"/>

<Separator/>

<MenuItem Header="Salvar"/>

<MenuItem Header="Salvar Como..."/>

<Separator/>

<MenuItem Header="Sair" Click="menuItemSair_Click" />

</MenuItem>

<MenuItem Header="_Ferramentas">

<MenuItem Header="_Configura‡äes" Click="menuItemConfiguracoes_Click" />

</MenuItem>

</Menu>

<ToolBar Margin="0,20,0,0" Name="toolBarPaleta" Height="49" VerticalAlignment="Top">

<Button Name="btnInicio" Click="btnInicio_Click" ToolTip="In¡cio" BorderThickness="1" Padding="2" IsEnabled="True">

<DockPanel>

<Image Source="Resources/inicio.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnFim" ToolTip="Fim" Click="btnFim_Click">

<DockPanel>

<Image Source="Resources/fim.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnOperacao" ToolTip="Opera‡Æo" Click="btnOperacao_Click">

<DockPanel>

<Image Source="Resources/operacao.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnImpressao" ToolTip="ImpressÆo" Click="btnImpressao_Click">

<DockPanel>

<Image Source="Resources/exibir.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnConector" ToolTip="Conector" Click="btnConector_Click">

<DockPanel>

<Image Source="Resources/conector.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnDecisao" ToolTip="DecisÆo" Click="btnDecisao_Click">

<DockPanel>

<Image Source="Resources/condicao.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Separator/>

<Button Name="btnLinha" Click="btnLinha_Click" ToolTip="Linha" >

<DockPanel>

<Image Source="Resources/caneta.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnBorracha" ToolTip="Borrachar" >

<DockPanel>

<Image Source="Resources/borracha.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Separator/>

<Button Name="btnSeta" ToolTip="Seta" Click="btnSeta_Click">

<DockPanel>

<Image Source="Resources/flecha.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Separator/>

<Button Name="btnMenosZoom" ToolTip="Menos zoom (-)" Click="btnMenosZoom_Click">

<DockPanel>

<Image Source="Resources/zoomMenos.bmp" Width="11" Height="11"/>

</DockPanel>

</Button>

<TextBox Name="textBoxZoom" Width="50" TextAlignment="Center" BorderThickness="1" BorderBrush="Black">100%</TextBox>

<Button Name="btnMaisZoom" ToolTip="Mais zoom (+)" Click="btnMaisZoom_Click">

<DockPanel>

<Image Source="Resources/zoomMais.bmp" Width="11" Height="11"/>

</DockPanel>

</Button>

</ToolBar>

<DockPanel Name="DockPanelDesenho" Margin="0,68,0,0">

<StatusBar BorderThickness="0" Height="23" HorizontalContentAlignment="Stretch" Name="statusBarInformacao" VerticalAlignment="Bottom" VerticalContentAlignment="Bottom" DockPanel.Dock="Bottom" Width="Auto">

<Label BorderThickness="0" Name="labelInformacao" Padding="2" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">Fluxograma</Label>

</StatusBar>

<ScrollViewer Margin="0" Name="scrollViewerDesenho" HorizontalScrollBarVisibility="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Background="White" VerticalScrollBarVisibility="Auto" Width="Auto" Height="Auto" DockPanel.Dock="Top">

<Canvas Height="Auto" Name="canvasDesenho" Width="Auto" Background="White" PreviewMouseLeftButtonDown="canvasDesenho_PreviewMouseLeftButtonDown" PreviewMouseMove="canvasDesenho_PreviewMouseMove" PreviewMouseLeftButtonUp="canvasDesenho_PreviewMouseLeftButtonUp">

<Canvas.LayoutTransform>

<ScaleTransform x:Name="canvasZoom" ScaleX="1" ScaleY="1" />

</Canvas.LayoutTransform>

</Canvas>

</ScrollViewer>

</DockPanel>

</Grid>

</Window>

Answer 8

Coloque o DockPanel ao invés do grid:

<DockPanel>

<Menu DockPanel.Dock="Top" ....>

....

</Menu>

<ToolBar DockPanel.Dock="Top" ...>

      ....

</ToolBar>

<StatusBar DockPanel.Dock="Bottom" ....>

....

</StatusBar>

<ScrollViewer >

....

</ScrollViewer>

</DockPanel>

Não precisa configurar a propriedade DockPanel.Dock do ScrollViewer

Bruno

Answer 9

Bruno,

 

Fiz o que você falou, mas ainda não deu. Desculpe pelo Incomodo.

 

Segue o código Abaixo:

 

<Window x:Class="FluxogramaWPF.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Window1" Height="300" Width="531">

<DockPanel>

<Menu DockPanel.Dock="Top" Name="menuPrincipal">

<MenuItem Header="_Arquivo">

</MenuItem>

<MenuItem Header="_Configura‡äes">

</MenuItem>

</Menu>

<ToolBar DockPanel.Dock="Top" Name="ToolBarPaletas">

<Button Name="btnInicio" ToolTip="In¡cio">

<DockPanel>

<Image Source="Resources/inicio.bmp" Width="40" Height="30" />

</DockPanel>

</Button>

<Button Name="btnFim" ToolTip="Fim">

<DockPanel>

<Image Source="Resources/fim.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnOperacao" ToolTip="Opera‡Æo">

<DockPanel>

<Image Source="Resources/operacao.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnImpressao" ToolTip="ImpressÆo">

<DockPanel>

<Image Source="Resources/exibir.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnCondicao" ToolTip="DecisÆo">

<DockPanel>

<Image Source="Resources/condicao.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnConector" ToolTip="Conector">

<DockPanel>

<Image Source="Resources/conector.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Separator/>

<Button Name="btnLinha" ToolTip="Tra‡ar Reta">

<DockPanel>

<Image Source="Resources/caneta.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Button Name="btnBorracha" ToolTip="Apagador">

<DockPanel>

<Image Source="Resources/borracha.bmp" Width="40" Height="30"/>

</DockPanel>

</Button>

<Separator/>

<Button Name="btnZoomMenos" ToolTip="Diminuir Zoom (-)" Click="btnMenosZoom_Click">

<DockPanel>

<Image Source="Resources/zoomMenos.bmp" Width="11" Height="11"/>

</DockPanel>

</Button>

<TextBox Width="50" Name="textBoxZoom" TextAlignment="Center" BorderThickness="1" BorderBrush="Black">100%</TextBox>

<Button Name="btnZoomMais" ToolTip="Aumentar Zoom" Click="btnMaisZoom_Click">

<DockPanel>

<Image Source="Resources/zoomMais.bmp" Width="11" Height="11"/>

</DockPanel>

</Button>

</ToolBar>

<StatusBar x:Name="statusBarInformacao" DockPanel.Dock="Bottom">

<Label Name="labelInformacao" Content="Fluxograma"/>

</StatusBar>

<ScrollViewer Name="scrollViewerDesenho" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

<Canvas x:Name="canvasDesenho" Background="White">

<Canvas.LayoutTransform>

<ScaleTransform x:Name="canvasZoom" ScaleX="1" ScaleY="1" />

</Canvas.LayoutTransform>

</Canvas>

</ScrollViewer>

</DockPanel>

</Window>

 

No construtor do Window1.cs eu fiz assim:

 

public Window1()

{

InitializeComponent();

//moveElemento = null;

currentZ = -1;

zoom = 100;

Line linha = new Line();

SolidColorBrush solidColorBrush = new SolidColorBrush();

//cor e a forma de preenchimento

solidColorBrush.Color = Colors.Blue;//CorReta;

linha.Stroke = solidColorBrush;

//posi‡äes

linha.X1 = 10;

linha.Y1 = 10;

linha.X2 = 500;

linha.Y2 = 500;

//forma do tra‡o da reta

linha.StrokeEndLineCap = PenLineCap.Triangle;

linha.StrokeThickness = 10.0;//EspessuraReta;

canvasDesenho.Children.Add(linha);

}

Answer 10

Dê um tamanho ao Canvas:

<Canvas x:Name="canvasDesenho" Background="White" Width="530" Height="300">

Bruno

Answer 11

Mas como eu possa fazer com que o canvas tenha o tamanho da janela? Tipo se mudo o tamanho da janela o canvas também deve mudar, se maximizo o canvas também deve maximizar...

 

Estou perguntando isso porque a região onde o usuário irá adicionar os objetos tem que estar full.

Isso da certo Bruno?

 

 

Obrigado

Answer 12

Se o Canvas tem o tamanho da janela, as scroll bars não aparecem (porque o canvas tem o tamanho da janela). Para as scrollbars aparecerem, ele tem que ser maior que a janela. Se você quer que as scroll bars apareçam só quando o zoom for maior que 1, você deve fazer algo como o seguinte no evento Resize da Window:

CanvasDesenho.Width = ActualWidth*FatorZoom;
CanvasDesenho.Height = ActualHeight*FatorZoom;

Bruno