Solved

how to scale graphicspath to match picturebox zoom

Posted on 2014-11-09
5
649 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is for Object-Oriented Programming (OOP) beginners. An Interface contains declarations of events, indexers, methods and/or properties. Any class which implements the Interface should provide the concrete implementation for each Inter…
Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
There's a multitude of different network monitoring solutions out there, and you're probably wondering what makes NetCrunch so special. It's completely agentless, but does let you create an agent, if you desire. It offers powerful scalability …
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

627 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