none
Como fazer um zoom no canvas? RRS feed

  • Pergunta

  • 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?

    quinta-feira, 10 de janeiro de 2008 16:24

Respostas

Todas as Respostas

  • quinta-feira, 10 de janeiro de 2008 22:46
    Moderador
  • 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

    sexta-feira, 11 de janeiro de 2008 12:37
  • 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?

    sexta-feira, 11 de janeiro de 2008 14:44
  • 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

    segunda-feira, 14 de janeiro de 2008 12:41
  • 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
    segunda-feira, 14 de janeiro de 2008 12:50
  • 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>

    segunda-feira, 14 de janeiro de 2008 17:16
  • 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
    segunda-feira, 14 de janeiro de 2008 17:25
  • 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);

    }

    segunda-feira, 14 de janeiro de 2008 19:15
  • Dê um tamanho ao Canvas:


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


    Bruno
    segunda-feira, 14 de janeiro de 2008 19:44
  • 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

    segunda-feira, 14 de janeiro de 2008 19:47
  • 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
    segunda-feira, 14 de janeiro de 2008 20:22