Solved

how to scale graphicspath to match picturebox zoom

Posted on 2014-11-09
5
486 Views
Last Modified: 2014-11-11
I have a picturebox on a form. I load an image into it at runtime. Then i create an array of grphicpaths to outline several shapes on the image.

But often the image needs to be stretched to fill fill the form. When this happens the pre saved graphics paths no longer line up with their corresponding shape. I am guessing that I need to scale the paths, but how do I know how much to scale them?
0
Comment
Question by:townsma
  • 3
  • 2
5 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40432196
I made a little test program based on some work I did for an earlier question. The code is:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

using System.Drawing.Drawing2D;

namespace EE_Q_28554079
{
    public partial class FormTestZoom : Form
    {
        GraphicsPath gp = null;
        float _offsetX = 0, _offsetY = 0, _scaleX = 1, _scaleY = 1;

        public FormTestZoom() {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e) {
            gp = new GraphicsPath();
            gp.AddLine(10, 10, 600, 200);
            gp.AddEllipse(150, 50, 200, 100);
            pictureBox1.Load(@"https://www.google.com/images/srpr/logo11w.png");

            comboBox1.Items.AddRange(Enum.GetNames(typeof(PictureBoxSizeMode)));
            comboBox1.SelectedItem = pictureBox1.SizeMode.ToString();
        }

        private void pictureBox1_Paint(object sender, PaintEventArgs e) {
            PictureBox pb = (PictureBox)sender;
            int imw = pb.Image.Width, imh = pb.Image.Height;
            //e.Graphics.DrawRectangle(Pens.Red, 0, 0, imw - 1, imh - 1); // show original location/size of image
            e.Graphics.TranslateTransform(_offsetX, _offsetY);
            e.Graphics.ScaleTransform(_scaleX, _scaleY);
            e.Graphics.DrawRectangle(Pens.Green, 0, 0, imw - 1, imh - 1); // show new location/size of image
            e.Graphics.DrawPath(Pens.Black, gp);
        }

        private void comboBox1_SelectedIndexChanged(object sender, EventArgs e) {
            ComboBox cb = (ComboBox)sender;
            pictureBox1.SizeMode = (PictureBoxSizeMode)Enum.Parse(typeof(PictureBoxSizeMode), cb.SelectedItem.ToString());
        }

        private void pictureBox1_Resize(object sender, EventArgs e) {
            SetOffsetAndScale((PictureBox)sender);
        }
        
        private void pictureBox1_SizeModeChanged(object sender, EventArgs e) {
            SetOffsetAndScale((PictureBox)sender);
        }

        private void SetOffsetAndScale(PictureBox pb) {
            int pbw = pb.ClientSize.Width, pbh = pb.ClientSize.Height, imw = pb.Image.Width, imh = pb.Image.Height;
            switch (pb.SizeMode) {
                case PictureBoxSizeMode.AutoSize:
                case PictureBoxSizeMode.Normal:
                    _offsetX = 0;
                    _offsetY = 0;
                    _scaleX = 1;
                    _scaleY = 1;
                    break;
                case PictureBoxSizeMode.CenterImage:
                    _offsetX = (float)(pbw - imw) / 2;
                    _offsetY = (float)(pbh - imh) / 2;
                    _scaleX = 1;
                    _scaleY = 1;
                    break;
                case PictureBoxSizeMode.StretchImage:
                    _offsetX = 0;
                    _offsetY = 0;
                    _scaleX = (float)pbw / imw;
                    _scaleY = (float)pbh / imh;
                    break;
                case PictureBoxSizeMode.Zoom:
                    _scaleX = (float)pbw / imw;
                    _scaleY = (float)pbh / imh;
                    if (_scaleX > _scaleY) _scaleX = _scaleY; else _scaleY = _scaleX;
                    _offsetX = (float)(pbw - _scaleX * imw) / 2;
                    _offsetY = (float)(pbh - _scaleY * imh) / 2;
                    break;
                default:
                    break;
            }
        }

    }
}

Open in new window

Important bits are: SetOffsetAndScale() which does the calculations and the Transform calls in the paint event handler which put the graphics in the right place. Note that this assumes that the graphics are originally positioned to an unscaled  image, otherwise you would need to do the opposite calculations while drawing.

Here are some screen captures:
captures
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40432198
Here is the designer code, in case you want to replicate the test program:
namespace EE_Q_28554079
{
    partial class FormTestZoom
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing) {
            if (disposing && (components != null)) {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent() {
            this.pictureBox1 = new System.Windows.Forms.PictureBox();
            this.panel1 = new System.Windows.Forms.Panel();
            this.comboBox1 = new System.Windows.Forms.ComboBox();
            this.button1 = new System.Windows.Forms.Button();
            this.textBox1 = new System.Windows.Forms.TextBox();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).BeginInit();
            this.panel1.SuspendLayout();
            this.SuspendLayout();
            // 
            // pictureBox1
            // 
            this.pictureBox1.BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D;
            this.pictureBox1.Dock = System.Windows.Forms.DockStyle.Fill;
            this.pictureBox1.Location = new System.Drawing.Point(0, 71);
            this.pictureBox1.Name = "pictureBox1";
            this.pictureBox1.Size = new System.Drawing.Size(292, 202);
            this.pictureBox1.TabIndex = 0;
            this.pictureBox1.TabStop = false;
            this.pictureBox1.SizeModeChanged += new System.EventHandler(this.pictureBox1_SizeModeChanged);
            this.pictureBox1.Paint += new System.Windows.Forms.PaintEventHandler(this.pictureBox1_Paint);
            this.pictureBox1.Resize += new System.EventHandler(this.pictureBox1_Resize);
            // 
            // panel1
            // 
            this.panel1.BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D;
            this.panel1.Controls.Add(this.comboBox1);
            this.panel1.Controls.Add(this.button1);
            this.panel1.Controls.Add(this.textBox1);
            this.panel1.Dock = System.Windows.Forms.DockStyle.Top;
            this.panel1.Location = new System.Drawing.Point(0, 0);
            this.panel1.Name = "panel1";
            this.panel1.Size = new System.Drawing.Size(292, 71);
            this.panel1.TabIndex = 1;
            // 
            // comboBox1
            // 
            this.comboBox1.FormattingEnabled = true;
            this.comboBox1.Location = new System.Drawing.Point(10, 38);
            this.comboBox1.Name = "comboBox1";
            this.comboBox1.Size = new System.Drawing.Size(121, 21);
            this.comboBox1.TabIndex = 2;
            this.comboBox1.SelectedIndexChanged += new System.EventHandler(this.comboBox1_SelectedIndexChanged);
            // 
            // button1
            // 
            this.button1.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Right)));
            this.button1.Enabled = false;
            this.button1.Location = new System.Drawing.Point(203, 10);
            this.button1.Name = "button1";
            this.button1.Size = new System.Drawing.Size(75, 23);
            this.button1.TabIndex = 1;
            this.button1.Text = "Browse...";
            this.button1.UseVisualStyleBackColor = true;
            // 
            // textBox1
            // 
            this.textBox1.Anchor = ((System.Windows.Forms.AnchorStyles)(((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Left) 
            | System.Windows.Forms.AnchorStyles.Right)));
            this.textBox1.Enabled = false;
            this.textBox1.Location = new System.Drawing.Point(10, 12);
            this.textBox1.Name = "textBox1";
            this.textBox1.Size = new System.Drawing.Size(187, 20);
            this.textBox1.TabIndex = 0;
            // 
            // FormTestZoom
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(292, 273);
            this.Controls.Add(this.pictureBox1);
            this.Controls.Add(this.panel1);
            this.Name = "FormTestZoom";
            this.Text = "Q_28554079";
            this.Load += new System.EventHandler(this.Form1_Load);
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).EndInit();
            this.panel1.ResumeLayout(false);
            this.panel1.PerformLayout();
            this.ResumeLayout(false);

        }

        #endregion

        private System.Windows.Forms.PictureBox pictureBox1;
        private System.Windows.Forms.Panel panel1;
        private System.Windows.Forms.ComboBox comboBox1;
        private System.Windows.Forms.Button button1;
        private System.Windows.Forms.TextBox textBox1;
    }
}

Open in new window

0
 
LVL 6

Author Comment

by:townsma
ID: 40432206
Hi Robert,

Thank looks exactly what I was looking for.  I will try to pull the key parts, and embed it into my code, and see how it goes.  Will get back to you asap.

Thanks
0
 
LVL 6

Author Comment

by:townsma
ID: 40434647
Hi Robert,

You solution was just what I needed.  I have a little problem with detecting mouse clicks over the shapes, but I simply divided the point.X and point.Y by the scaling factors, and it worked.

Thanks for such a clear and concise solution.

Best regards

Mark
0
 
LVL 6

Author Closing Comment

by:townsma
ID: 40434648
Great solution and example
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This document covers how to connect to SQL Server and browse its contents.  It is meant for those new to Visual Studio and/or working with Microsoft SQL Server.  It is not a guide to building SQL Server database connections in your code.  This is mo…
Introduction Hi all and welcome to my first article on Experts Exchange. A while ago, someone asked me if i could do some tutorials on object oriented programming. I decided to do them on C#. Now you may ask me, why's that? Well, one of the re…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now