畫線縮放、瞳距縮放、Line延長到指定長度,內附效果,源碼供應,解壓就跑

来源:https://www.cnblogs.com/xuling-297769461/archive/2019/12/13/12034212.html

前言 公司項目需要做個畫線縮放,我司稱之為瞳距縮放,簡而言之就是:2張圖,從第一張圖畫一條線,再從第二個圖畫一條線,第二條線以第一條為基準,延長到一致的長度,並同比縮放圖片;文字太枯燥,請先實例圖 例子1:以皮卡丘為例,我要把路飛的拳頭縮放到皮卡丘頭那麼大 例子2:以皮卡丘的基準,縮小路飛,與其身高 ...


前言

公司項目需要做個畫線縮放,我司稱之為瞳距縮放,簡而言之就是:2張圖,從第一張圖畫一條線,再從第二個圖畫一條線,第二條線以第一條為基準,延長到一致的長度,並同比縮放圖片;文字太枯燥,請先實例圖

例子1:以皮卡丘為例,我要把路飛的拳頭縮放到皮卡丘頭那麼大

例子2:以皮卡丘的基準,縮小路飛,與其身高一致

 

好了,相比看了上面的2個效果圖,就明白了大致意思,這個demo可以獲得,Canvas裡面的Line如何順著線條方向,無限延伸的解決方案,以及畫線縮放等...

會運用到高中數學知識,三角函數知識點,所以不熟悉的朋友,需要先溫習,這樣吧,我帶大家溫習下,反正工作忙完了,寫博客和網友分享經驗是最愉悅的事兒...

 

三角函數必要知識點溫習

tan:對邊 / 臨邊      tanA = BC / AC

sin:對邊 / 斜邊    sinA = BC / AB

cos:臨邊 / 斜邊     cosA = AC / AB

已知邊 BC 、AC,求角A的度數    ∠A = Math.Atan(BC / AC);   這是最關鍵的,獲取A的角度就解決了所有,起初我還是想了很久的,年齡一大,以前的事就記不得了,劃重點這裡

好了,三角函數的知識溫習到這裡就足矣了,想象一下,把這個三角形放到程式的坐標系中,細細品,假如用戶隨意畫的線就是AB,在畫好的基礎上進行延長.......細細品....

 

畫線縮放,難點就是,如何讓第二條線延長

請看圖

已知了A點B點的坐標,通過坐標系,就能換算出BC邊和AC的長度

運用三角函數,∠A的度數就等於:Math.Atan(BC / AC);

拿到的∠A,一切都變得好說了

比如,AB=100

sinA = BC / AB      ----->         sinA = BC / 100     ---->   BC = sinA * 100

BC = 100 * Math.Sin(∠A)

cosA = AC / AB  ---->   cosA = AC / 100  ---->  AC = cosA * 100

AC = 100 * Math.Cos(∠A)

BC、AC邊都拿到,相信朋友們能轉換成Point了

 

好了,上面都是知識點,很枯燥,程式員還是看代碼吧,總歸是要代碼實現的

 1 <Window x:Class="PupilDistanceDemo.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:PupilDistanceDemo"
 7         mc:Ignorable="d"
 8         WindowStartupLocation="CenterScreen"
 9         Title="瞳距縮放" Height="450" Width="800">
10     <Grid>
11         <Canvas Background="#0D1728" x:Name="canvas">
12             <Image Source="2.jpg" x:Name="img1" Stretch="Fill" Width="300"  Canvas.Top="100" Canvas.Left="50" />
13             <Image Source="1.jpg" x:Name="img2" Stretch="Fill" Width="200" Canvas.Top="100" Canvas.Left="400" />
14         </Canvas>
15         <StackPanel Orientation="Horizontal">
16             <Button Margin="5" VerticalAlignment="Top" Click="Button_Click">啟動瞳距</Button>
17             <Button Margin="5" VerticalAlignment="Top" Click="Button_Click_1">關閉瞳距</Button>
18             <Button Margin="5" VerticalAlignment="Top" Click="Button_Click_2">瞳距計算</Button>
19             <Button Margin="5" VerticalAlignment="Top" Click="Button_Click_3">重置</Button>
20             <StackPanel VerticalAlignment="Top">
21                 <TextBlock Text="{Binding ElementName=img2,Path=ActualWidth}" Foreground="Red" />
22                 <TextBlock Text="{Binding ElementName=img2,Path=ActualHeight}" Foreground="Red" />
23             </StackPanel>
24         </StackPanel>
25     </Grid>
26 </Window>
  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Text;
  5 using System.Threading.Tasks;
  6 using System.Windows;
  7 using System.Windows.Controls;
  8 using System.Windows.Data;
  9 using System.Windows.Documents;
 10 using System.Windows.Input;
 11 using System.Windows.Media;
 12 using System.Windows.Media.Imaging;
 13 using System.Windows.Navigation;
 14 using System.Windows.Shapes;
 15 
 16 namespace PupilDistanceDemo
 17 {
 18     /// <summary>
 19     /// MainWindow.xaml 的交互邏輯
 20     /// </summary>
 21     public partial class MainWindow : Window
 22     {
 23         bool isLeftButtonDown = false;
 24         Image image;
 25 
 26         bool isPupilDistance = false;
 27         Size size;
 28 
 29         Point currentPoint;
 30 
 31         public MainWindow()
 32         {
 33             InitializeComponent();
 34 
 35             img1.MouseLeftButtonDown += Img_MouseLeftButtonDown;
 36             img1.MouseMove += Img_MouseMove;
 37             img1.MouseLeftButtonUp += Img_MouseLeftButtonUp;
 38 
 39             img2.MouseLeftButtonDown += Img_MouseLeftButtonDown;
 40             img2.MouseMove += Img_MouseMove;
 41             img2.MouseLeftButtonUp += Img_MouseLeftButtonUp;
 42 
 43             this.Loaded += MainWindow_Loaded;
 44         }
 45 
 46         private void MainWindow_Loaded(object sender, RoutedEventArgs e)
 47         {
 48             size = new Size(img2.ActualWidth, img2.ActualHeight);
 49         }
 50 
 51         private void Img_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
 52         {
 53             isLeftButtonDown = false;
 54             image = null;
 55         }
 56 
 57         private void Img_MouseMove(object sender, MouseEventArgs e)
 58         {
 59             if (isLeftButtonDown && sender is Image imgc)
 60             {
 61                 var point = e.GetPosition(canvas);
 62                 if (isPupilDistance && imgc.Tag is Line line)
 63                 {
 64                     if (image.Equals(imgc))
 65                     {
 66                         var x = point.X;
 67                         var y = point.Y;
 68                         if (x > line.X1) x -= 2;
 69                         else x += 2;
 70                         if (y > line.Y1) y -= 2;
 71                         else y += 2;
 72                         line.X2 = x;
 73                         line.Y2 = y;
 74                     }
 75                 }
 76                 else if (sender is Image image)
 77                 {
 78                     image.SetValue(Canvas.LeftProperty, point.X - currentPoint.X);
 79                     image.SetValue(Canvas.TopProperty, point.Y - currentPoint.Y);
 80                 }
 81             }
 82         }
 83 
 84         private void Img_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 85         {
 86             image = sender as Image;
 87             isLeftButtonDown = true;
 88             if (sender is Image imgc)
 89             {
 90                 currentPoint = e.GetPosition(imgc);
 91 
 92                 if (isPupilDistance)
 93                 {
 94                     if (imgc.Tag is Line line)
 95                     {
 96                         canvas.Children.Remove(line);
 97                     }
 98 
 99                     line = new Line();
100                     line.StrokeThickness = 2;
101                     line.Stroke = new SolidColorBrush(Colors.Red);
102                     var point = e.GetPosition(canvas);
103                     line.X1 = point.X - 1;
104                     line.Y1 = point.Y - 1;
105                     line.X2 = line.X1;
106                     line.Y2 = line.Y1;
107                     canvas.Children.Add(line);
108                     imgc.Tag = line;
109                 }
110             }
111         }
112 
113         private void Button_Click(object sender, RoutedEventArgs e)
114         {
115             isPupilDistance = true;
116         }
117 
118         private void Button_Click_1(object sender, RoutedEventArgs e)
119         {
120             isPupilDistance = false;
121         }
122 
123         /// <summary>
124         /// 計算瞳距
125         /// </summary>
126         /// <param name="sender"></param>
127         /// <param name="e"></param>
128         private void Button_Click_2(object sender, RoutedEventArgs e)
129         {
130             var l1 = img1.Tag as Line;
131             var l2 = img2.Tag as Line;
132 
133             if (l1 == null || l2 == null)
134             {
135                 MessageBox.Show("請先 啟用瞳距 ,再在圖片上畫線");
136                 return;
137             }
138 
139             //獲取第一個圖片的線
140             var length1 = Distance(new Point(l1.X1, l1.Y1), new Point(l1.X2, l1.Y2));
141 
142             //獲取第二個圖片的線
143             var length2 = Distance(new Point(l2.X1, l2.Y1), new Point(l2.X2, l2.Y2));
144 
145             //利用三角函數計算出以第一個圖的線為基準,延長第二個圖的線
146             var AC = Math.Abs(l2.X2 - l2.X1);
147             var BC = Math.Abs(l2.Y2 - l2.Y1);
148 
149             var jiaodu = Math.Atan(BC / AC);
150             var sinVal = Math.Sin(jiaodu);
151             var cosVal = Math.Cos(jiaodu);
152             var ac = cosVal * length1;
153             var bc = sinVal * length1;
154 
155             double xnew = 0, ynew = 0;
156             if (l2.X2 > l2.X1) xnew = ac + l2.X1;
157             else xnew = l2.X1 - ac;
158 
159             if (l2.Y2 > l2.Y1) ynew = l2.Y1 + bc;
160             else ynew = l2.Y1 - bc;
161 
162             l2.X2 = xnew;
163             l2.Y2 = ynew;
164 
165             var wnew = length1 / (length2 / img2.ActualWidth);
166             var hnew = length1 / (length2 / img2.ActualHeight);
167 
168             //以用戶畫的起點作為縮放中心
169             var x = (double)img2.GetValue(Canvas.LeftProperty);
170             var y = (double)img2.GetValue(Canvas.TopProperty);
171 
172             //起始點相對於圖片的位置
173             var l2xToimg = l2.X1 - x;
174             var l2yToimg = l2.Y1 - y;
175 
176             //獲取起始點相對於圖片的新位置,縮放後
177             var l2xToimgnew = l2xToimg / img2.ActualWidth * wnew;
178             var l2yToimgnew = l2yToimg / img2.ActualHeight * hnew;
179 
180             img2.SetValue(Canvas.LeftProperty, l2.X1 - l2xToimgnew);
181             img2.SetValue(Canvas.TopProperty, l2.Y1 - l2yToimgnew);
182 
183             //縮放
184             img2.Width = wnew;
185             img2.Height = hnew;
186         }
187 
188         /// <summary>
189         /// 計算點位之間的距離
190         /// </summary>
191         /// <param name="p1"></param>
192         /// <param name="p2"></param>
193         /// <returns></returns>
194         private double Distance(Point p1, Point p2)
195         {
196             double result = 0;
197             result = Math.Sqrt((p1.X - p2.X) * (p1.X - p2.X) + (p1.Y - p2.Y) * (p1.Y - p2.Y));
198             return result;
199         }
200 
201         /// <summary>
202         /// 重置
203         /// </summary>
204         /// <param name="sender"></param>
205         /// <param name="e"></param>
206         private void Button_Click_3(object sender, RoutedEventArgs e)
207         {
208             List<Line> l = new List<Line>();
209             foreach (var item in canvas.Children)
210             {
211                 if (item is Line line)
212                 {
213                     l.Add(line);
214                 }
215             }
216 
217             l.ForEach(c => canvas.Children.Remove(c));
218 
219             img2.Width = size.Width;
220             img2.Height = size.Height;
221 
222             img2.SetValue(Canvas.LeftProperty, 380.0);
223             img2.SetValue(Canvas.TopProperty, 100.0);
224         }
225     }
226 }

 

看到這裡,可以先揉揉眼睛,放鬆下...

全部代碼已經貼上,下麵是下載鏈接,有需要的朋友可以移步下載,歡迎點評,謝謝~

點擊下載,資源下載


您的分享是我們最大的動力!

更多相關文章
  • 問題 在開發一款應用的過程中,我們開發者很難考慮到所有問題,往往會忘記處理一些可能發生的異常。隨之而來的結果就是用戶使用過程中接連不斷的崩潰。所以,我們有必要處理所有未被我們處理的異常。 思路 我們需要做的是,在錯誤發生時保存用戶數據,然後將錯誤直接展示在用戶界面上。 解決 首先,我們打開項目中的 ...
  • 比如我們需要ASP.NET Core 中需要通過PDF來進行某些簡單的報表開發,隨著這並不難,但還是會手忙腳亂的去搜索一些資料,那麼恭喜您,這篇帖子會幫助到您,我們就不會再去浪費一些寶貴的時間。 在本文中我們將要使用DinkToPDF來處理我們在.NET Core Web 程式中進行構建PDF文檔! ...
  • EulerOS其實出來有一段時間了,一直在關註,單是僅僅也只是停留在觀望的階段,目前還沒有接入的打算;正好看到園子里的兄弟分享了華為雲免費試用的活動後,難捺激動的心情,我馬上去申請試用了一臺伺服器。 ...
  • 如果要在程式中使用DbContext,則需要先在Nuget中安裝Microsoft.EntityFrameworkCore.SqlServer ...
  • 原文:https://blogs.msdn.microsoft.com/mazhou/2017/12/12/c-7-series-part-7-ref-returns/ 背景 有兩種方法可以將一個值傳遞給一個方法: 例如,FCL(.NET Framework Class Library)中的Arra ...
  • 引用類庫 1.Install-Package Microsoft.Extensions.Caching.Memory MemoryCacheOptions 緩存配置 1.ExpirationScanFrequency 獲取或設置對過期項的連續掃描之間的最短時間間隔 2.SizeLimit 緩存是沒有 ...
  • 對於地圖坐標偏移,以leaflet為例,有如下解決辦法 方法1、修改leaflet源碼,解決地圖坐標偏移問題 方法2、將點位真實的經緯度經過偏移演算法,添加到加密的地圖上 方法3、直接對離線地圖瓦片進行糾偏 方法1需要修改源碼 方法2有缺陷,地圖依然是偏移的,如果把地圖經緯度顯示出來,經緯度也是不對的 ...
  • 9月份的時候,微軟宣佈正式發佈C 8.0,作為.NET Core 3.0發行版的一部分。C 8.0的新特性之一就是預設介面實現。在本文中,我們將一起來聊聊預設介面實現。 作者:依樂祝 原文鏈接:https://www.cnblogs.com/yilezhu/p/12034584.html 提前說下: ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...