2D CGライブラリSkiaSharp「iconドラッグアンドドロップ試作」

• アイコン配置のサンプル

• USR1,2,3をNo1,2,3にドラックアンドドロップできるもの。

• 何も考えずに書き始めたら所謂、クソコードになりました。

• 拡張するのが大変。

• キャンセルエリアはもっと広げる必要が有るがこれは左端のみ。

WPF

using SkiaSharp;
using SkiaSharp.Views.Desktop;
using System.Drawing;
using System.Threading.Tasks;
using System.Windows;

namespace SkiaSharpSample {

    public partial class MainWindow : Window	{
        
        static int R,G,B;
        static int WORLD_X,WORLD_Y;
        static int LOCAL_X,LOCAL_Y;

        ///////////////////////////////
        static int LB1 =0;             //  0=右にある　1=左にある 2=左でドラッグ開始 3=右でドラッグ開始
        static string USR1POINT;        // USR1がどこに入っているか  NO1,NO2,,　が入る
        
        static int LB2 =0;             
        static string USR2POINT;

        static int LB3 =0;
        static string USR3POINT;

        static string DRG_NO="";        //左でドラッグ開始した NO1,NO2が入る
        static string DRG_USR="";       //ドラッグ中 USR名 USR1,USR2..

        static string NO1NAME="",NO2NAME="",NO3NAME=""; // USR1,USR2,,,,が入る

		public MainWindow()		{
			InitializeComponent();

		}

        private async  void Window_Loaded(object sender, RoutedEventArgs e) {

            while (true){

                await Task.Delay(10);
                MainCanvas.InvalidateVisual(); 
                Title="LB1="+LB1.ToString() + "/USR1POINT="+USR1POINT+"/NO3NAME="+NO3NAME+"/DRG_USR="+DRG_USR+"/DRG_NO="+DRG_NO;
                                                   
            }
        }


        private void MainCanvas_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) {
        
            //////////////////
            // 右で選択開始
            //////////////////
           
            // USR1
            if( (R == 255 && G == 155 && B == 0) && LOCAL_X>967 && LB1==0) {
                LB1=3;
                USR1POINT="";
                DRG_USR="USR1";
                return;
            }

            // USR2
            if( (R == 255 && G == 154 && B == 0) && LOCAL_X>967 && LB2==0) {
                LB2=3;
                USR2POINT="";
                DRG_USR="USR2";
                return;
            }


            // USR3
            if( (R == 255 && G == 153 && B == 0) && LOCAL_X>967 && LB3==0) {
                LB3=3;
                USR3POINT="";
                DRG_USR="USR3";
                return;

            }

            //////////////////////////////////////////
            
            ////////////////////////////////
            // 左で選択開始
            ////////////////////////////////
            

            // USR1 - NO1
            if ( (R == 255 && G == 155 && B == 0) && (LOCAL_X > 150  && LOCAL_X<346 && LOCAL_Y <155)) {
                DRG_NO="NO1";
                DRG_USR="USR1";
                LB1=2;
            }

            // USR2 - NO1
            if ( (R == 255 && G == 154 && B == 0) && (LOCAL_X > 150  && LOCAL_X<346 && LOCAL_Y <155)){
                DRG_USR="USR2";
                DRG_NO="NO1";
                LB2=2;
            }


            // USR3 - NO1
            if ( (R == 255 && G == 153 && B == 0) && (LOCAL_X > 150  && LOCAL_X<346 && LOCAL_Y <155)){
                DRG_USR="USR3";
                DRG_NO="NO1";
                LB3=2;
            }
                     
            // USR1 - NO2
            if ( (R == 255 && G == 155 && B == 0) && (LOCAL_X > 346 && LOCAL_X<652 && LOCAL_Y <155)) {
                DRG_USR="USR1";
                DRG_NO="NO2";
                LB1=2;

            }
            
            // USR2 - NO2
            if ( (R == 255 && G == 154 && B == 0) && (LOCAL_X > 346  && LOCAL_X<652 && LOCAL_Y <155)){
                DRG_USR="USR2";
                DRG_NO="NO2";
                LB2=2;
            }
            
            // USR3 - NO2
            if ( (R == 255 && G == 153 && B == 0) && (LOCAL_X > 346  && LOCAL_X<652 && LOCAL_Y <155)){
                DRG_USR="USR3";
                DRG_NO="NO2";
                LB3=2;
            }
            
            // USR1 - NO3
            if ( (R == 255 && G == 155 && B == 0) && (LOCAL_X > 650  && LOCAL_X<845 && LOCAL_Y <155)) {
                DRG_USR="USR1";
                DRG_NO="NO3";
                LB1=2;

            }
            
            // USR2 - NO3
            if ( (R == 255 && G == 154 && B == 0) && (LOCAL_X > 650  && LOCAL_X<845 && LOCAL_Y <155)){
                DRG_USR="USR2";
                DRG_NO="NO3";
                LB2=2;
            }

            // USR3 - NO3
            if ( (R == 255 && G == 153 && B == 0) && (LOCAL_X > 650  && LOCAL_X<845 && LOCAL_Y <155)){
                DRG_USR="USR3";
                DRG_NO="NO3";
                LB3=2;
            }
        }

        private void MainCanvas_MouseMove(object sender, System.Windows.Input.MouseEventArgs e) {
            
            var point = this;
            var x2=point.Left;

            WORLD_X=(int)point.Left;
            WORLD_Y=(int)point.Top+30;
                       
           
            System.Windows.Point point2 = e.GetPosition(this);
            LOCAL_Y=(int)point2.Y;
            LOCAL_X=(int)point2.X;
               
            GetCOLOR (LOCAL_X+WORLD_X,LOCAL_Y+WORLD_Y);
        
        }

        private void MainCanvas_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e) {
            

            // USR1 右からドラッグしてNO1でUP
            if ( (LOCAL_X > 150  && LOCAL_X<353 && LOCAL_Y <155) && (LB1==3) ){ 
                DRG_USR="";

                // NO1配置済
                if (NO1NAME!="") {
                    LB1=0;
                    return;
                }

                LB1=1;
                NO1NAME="USR1";
                USR1POINT="NO1";

                return;                    
            }

            // USR2 右からドラッグしてNO1でUP
            if ( (LOCAL_X > 150 && LOCAL_X<353 && LOCAL_Y <155) && (LB2==3) ){ 
                DRG_USR="";

                if (NO1NAME!=""  ){
                    LB2=0;
                    return;
                }

                LB2=1; // 配置済
                NO1NAME="USR2";
                USR2POINT="NO1";
                return;                    
            }


            // USR3 右からドラッグしてNO1でUP
            if ( (LOCAL_X > 150 && LOCAL_X<353 && LOCAL_Y <155) && (LB3==3) ){ 
                DRG_USR="";

                if (NO1NAME!=""){
                    LB3=0;
                    return;
                }

                LB3=1; // 配置済
                NO1NAME="USR3";
                USR3POINT="NO1";
                return;                    
            }


            // USR1 右からドラッグしてNO2でUP
            if ( (LOCAL_X > 346  && LOCAL_X<650 && LOCAL_Y <155) && (LB1==3) ){ 
                
                DRG_USR="";

                // NO1配置済
                if (NO2NAME!="") {
                    LB1=0;
                    return;
                }

                LB1=1;
                NO2NAME="USR1";
                USR1POINT="NO2";
                return;                    
            }

            // USR2 右からドラッグしてNO2でUP
            if ( (LOCAL_X > 346 && LOCAL_X<650 && LOCAL_Y <155) && (LB2==3) ){ 
                DRG_USR="";

                if (NO2NAME!=""){
                    LB2=0;
                    return;
                }

                LB2=1; // 配置済
                NO2NAME="USR2";
                USR2POINT="NO2";
                return;                    
            }
            
            // USR3 右からドラッグしてNO2でUP
            if ( (LOCAL_X > 346 && LOCAL_X<650 && LOCAL_Y <155) && (LB3==3) ){ 
                DRG_USR="";

                if (NO2NAME!=""){
                    LB3=0;
                    return;
                }

                LB3=1; // 配置済
                NO2NAME="USR3";
                USR3POINT="NO2";
                return;                    
            }


            // USR1 右からドラッグしてNO3でUP
            if ( (LOCAL_X > 650  && LOCAL_X<845 && LOCAL_Y <155) && (LB1==3) ){ 
                
                DRG_USR="";

                // NO1配置済
                if (NO3NAME!="") {
                    LB1=0;
                    return;
                }

                LB1=1;
                NO3NAME="USR1";
                USR1POINT="NO3";
                return;                    
            }

            // USR2 右からドラッグしてNO3でUP
            if ( (LOCAL_X > 650 && LOCAL_X<845 && LOCAL_Y <155) && (LB2==3) ){ 
                DRG_USR="";

                if (NO3NAME!=""){
                    LB2=0;
                    return;
                }

                LB2=1; // 配置済
                NO3NAME="USR2";
                USR2POINT="NO3";
                return;                    
            }
            


            // USR3 右からドラッグしてNO3でUP
            if ( (LOCAL_X > 650 && LOCAL_X<845 && LOCAL_Y <155) && (LB3==3) ){ 
                DRG_USR="";

                if (NO3NAME!=""){
                    LB3=0;
                    return;
                }

                LB3=1; // 配置済
                NO3NAME="USR3";
                USR3POINT="NO3";
                return;                    
            }

            // 以上 右から左
            /////////////////////////////////////////////////////

            /////////////////////////////////////////////////
   

            // USR1 NO1でUP 
            if ( (LOCAL_X > 150  && LOCAL_X<346 && LOCAL_Y <155) && LB1==2   ){ 
                
                DRG_USR="";
                LB1=1;
             

                if (NO1NAME!="USR1" && NO1NAME!="") {
                    DRG_NO="";
                    return;
                }

                if (DRG_NO == "NO2") {
                    NO2NAME="";
                    DRG_NO="";
                }

                if (DRG_NO == "NO3") {
                    NO3NAME="";
                    DRG_NO="";
                }


                LB1 = 1; // 配置済
                NO1NAME="USR1";
                USR1POINT="NO1";

                return;                    
            }


            // USR1 NO2でUP 
            if ( (LOCAL_X > 346  && LOCAL_X<650 && LOCAL_Y <155) && LB1==2   ){ 
                DRG_USR="";
                LB1=1;
                
                if (NO2NAME!="USR1" && NO2NAME!="") {
                    DRG_NO="";
                    return;
                }
                   

                if(DRG_NO == "NO1") {
                    NO1NAME="";
                    DRG_NO="";
                }

                if(DRG_NO == "NO3") {
                    NO3NAME="";
                    DRG_NO="";
                }

                LB1 = 1; // 配置済
                NO2NAME="USR1";
                USR1POINT="NO2";

                return;                        
            }

            // USR1 NO3でUP 
            if ( (LOCAL_X > 650  && LOCAL_X<845 && LOCAL_Y <155) && LB1==2   ){ 
                DRG_USR="";
                LB1=1;
                
                if (NO3NAME!="USR1" && NO3NAME!="") {
                    DRG_NO="";
                    return;
                }
                    
                if(DRG_NO == "NO1") {
                    NO1NAME="";
                    DRG_NO="";
                }
                                
                if(DRG_NO == "NO2") {
                    NO2NAME="";
                    DRG_NO="";
                }
    


                LB1 = 1; // 配置済
                NO3NAME="USR1";
                USR1POINT="NO3";

                return;                        
            }


            //////////////////////////////////////////////////
            

            // USR2 NO1でUP 
            if ( (LOCAL_X > 150  && LOCAL_X<346 && LOCAL_Y <155) && LB2==2   ){ 
                                
                DRG_USR="";
                LB2=1;

                if (NO1NAME!="USR2" && NO1NAME!="") {
                    DRG_NO="";
                    return;
                }
                
                if (DRG_NO == "NO2") {
                    NO2NAME="";
                    DRG_NO="";
                }

                if (DRG_NO == "NO3") {
                    NO3NAME="";
                    DRG_NO="";
                }


                LB2 = 1; // 配置済
                NO1NAME="USR2";
                USR2POINT="NO1";

                return;                    
            }



            // USR2 NO2でUP 
            if ( (LOCAL_X > 346  && LOCAL_X<650 && LOCAL_Y <155) && LB2==2   ){ 
                DRG_USR="";
                LB2=1;
                
                if (NO2NAME!="USR2" && NO2NAME!="") {
                    DRG_NO="";
                    return;
                }

                if(DRG_NO == "NO1") NO1NAME="";
                if(DRG_NO == "NO3") NO3NAME="";
                              
                DRG_NO="";
                LB2 = 1; // 配置済
                NO2NAME="USR2";
                USR2POINT="NO2";

                return;                        
            }

            // USR2 NO3でUP 
            if ( (LOCAL_X > 650  && LOCAL_X<845 && LOCAL_Y <155) && LB2==2   ){ 
                DRG_USR="";
                LB2=1;
                

                if (NO3NAME!="USR2" && NO3NAME!="") {
                    DRG_NO="";
                    return;
                }

                if(DRG_NO == "NO1") NO1NAME="";
                if(DRG_NO == "NO2") NO2NAME="";
                      
                DRG_NO="";
                LB2 = 1; // 配置済
                NO3NAME="USR2";
                USR2POINT="NO3";

                return;                        
            }



            // USR3 NO1でUP 
            if ( (LOCAL_X > 150  && LOCAL_X<346 && LOCAL_Y <155) && LB3==2   ){ 
                                
                DRG_USR="";
                LB3=1;
                
                if (NO1NAME!="USR3" && NO1NAME!="") {
                    DRG_NO="";
                    return;
                }

                if (DRG_NO == "NO2") NO2NAME="";
                if (DRG_NO == "NO3") NO3NAME="";
                              
               
                DRG_NO="";  
                NO1NAME="USR3";
                USR3POINT="NO1";

                return;                    
            }



            // USR3 NO2でUP 
            if ( (LOCAL_X > 346  && LOCAL_X<650 && LOCAL_Y <155) && LB3==2   ){ 

                DRG_USR="";
                LB3=1;


                if (NO2NAME!="USR3" && NO2NAME!="") {
                    DRG_NO="";
                    return;
                }
                
                if(DRG_NO == "NO1") NO1NAME="";
                if(DRG_NO == "NO3") NO3NAME="";
                                  
                DRG_NO="";
                NO2NAME="USR3";
                USR2POINT="NO2";

                return;                        
            }

            // USR3 NO3でUP 
            if ( (LOCAL_X > 650  && LOCAL_X<845 && LOCAL_Y <155) && LB3==2   ){ 

                DRG_USR="";
                LB3=1;
                
                if (NO3NAME!="USR3" && NO3NAME!="") {
                    DRG_NO="";
                    return;
                }

                if(DRG_NO == "NO1") NO1NAME="";
                if(DRG_NO == "NO2") NO2NAME="";
                
                DRG_NO="";
                NO3NAME="USR3";
                USR3POINT="NO3";

                return;                        
            }

            // 以上、左からドラックして違うところにドロップ
            /////////////////////////////////////////////////


            // 右でUP //////////////////////////////////////
            if(  LOCAL_X > 967) {
            
          
                // USR1 右からの移動中で右で上げる  (キャンセル)
                if (LB1 == 3) {
                    LB1=0; // 初期位置
                    DRG_USR="";
                    DRG_NO="";

                    return;
                }

                // USR2 右からの移動中で右で上げる  (キャンセル)
                if (LB2 == 3) {
                    LB2=0; // 初期位置
                    DRG_USR="";
                    DRG_NO="";

                    return;
                }

                // USR3 右からの移動中で右で上げる  (キャンセル)
                if (LB3 == 3) {
                    LB3=0; // 初期位置
                    DRG_USR="";
                    DRG_NO="";

                    return;
                }


                // 左の確定から移動で右で上げる (キャンセル)
                if (LB1==2){

                    LB1= 0;
                    USR1POINT="";

                    if(DRG_NO == "NO1") {
                        NO1NAME="";
                        DRG_NO="";
                        DRG_USR="";
                        return;
                    }

                    if(DRG_NO == "NO2") {
                        NO2NAME="";
                        DRG_NO="";
                        DRG_USR="";
                        return;
                    }
                    
                    if(DRG_NO == "NO3") {
                        NO3NAME="";
                        DRG_NO="";
                        DRG_USR="";
                        return;
                    }

                    return;

                }

                // 左の確定から移動で右で上げる (キャンセル)
                if (LB2==2){

                    LB2= 0;
                    USR2POINT="";
                    DRG_USR="";

                    if(DRG_NO == "NO1") {
                        NO1NAME="";
                        DRG_NO="";
                        return;
                    }

                    if(DRG_NO == "NO2") {
                        NO2NAME="";
                        DRG_NO="";
                        return;
                    }

                    if(DRG_NO == "NO3") {
                        NO3NAME="";
                        DRG_NO="";
                        return;
                    }
                    return;
 

                }

                // 左の確定から移動で右で上げる (キャンセル)
                if (LB3==2){

                    LB3= 0;
                    USR3POINT="";
                    DRG_USR="";

                    if(DRG_NO == "NO1") {
                        NO1NAME="";
                        DRG_NO="";
                        return;
                    }

                    if(DRG_NO == "NO2") {
                        NO2NAME="";
                        DRG_NO="";
                        return;
                    }

                    if(DRG_NO == "NO3") {
                        NO3NAME="";
                        DRG_NO="";
                        return;
                    }
                    return;
                }
                     
            }
            /////////////////////////////////////////////
            
            // テーブル外でUP
            if ( LOCAL_X<100) {

                DRG_NO="";
                DRG_USR="";

                // 右で選択開始した場合
                if (LB1== 3) LB1=0;
                if (LB2== 3) LB2=0;
                if (LB3== 3) LB3=0;

                // テーブルから移動してテーブル内の範囲外でUP
                // USR1
                if (LB1==2){
                    LB1=1; 
                }
                
                // USR2
                if (LB2==2){
                    LB2=1; 
                }

                // USR3
                if (LB3==2){
                    LB3=1; 
                }
            }
        }


        void PaintSurface(object sender, SKPaintSurfaceEventArgs args){

            SKImageInfo info = args.Info;
            SKSurface surface = args.Surface;
            SKCanvas canvas = surface.Canvas;

            canvas.Clear(SKColors.Black);

            SKPaint TABLE = new SKPaint{
                Style = SKPaintStyle.Stroke,
                Color = SKColors.White,
                IsAntialias=true,
                StrokeWidth=3,
                LcdRenderText=true,
            };

            // TABLEパーティション
            SKPaint S_LINE = new SKPaint{
                Style = SKPaintStyle.Stroke,
                Color = SKColors.Yellow,
                IsAntialias=true,
                StrokeWidth=2,
                LcdRenderText=true,
            };

            // 縦パーティション
            SKPaint PA_LINE = new SKPaint{
                Style = SKPaintStyle.Stroke,
                Color = SKColors.Green,
                IsAntialias=true,
                StrokeWidth=5,
                LcdRenderText=true,
            };


            // USR1 フル 255,155,0
            SKPaint U1= new SKPaint{
                Style = SKPaintStyle.Fill,
                Color = new SKColor (255,155,0),
                IsAntialias=true,
                StrokeWidth=4,
                LcdRenderText=true,
            };

            // USR2 フル 255,154,0
            SKPaint U2= new SKPaint{
                Style = SKPaintStyle.Fill,
                Color = new SKColor (255,154,0),
                IsAntialias=true,
                StrokeWidth=4,
                LcdRenderText=true,
            };

 
            // USR3 フル 255,153,0
            SKPaint U3= new SKPaint{
                Style = SKPaintStyle.Fill,
                Color = new SKColor (255,153,0),
                IsAntialias=true,
                StrokeWidth=4,
                LcdRenderText=true,
            };

            // USR1 薄い
            SKPaint U1_OUT= new SKPaint{
                Style = SKPaintStyle.Fill,
                Color = new SKColor (255,155,0,150),
                IsAntialias=true,
                StrokeWidth=4,
                LcdRenderText=true,
            };

            // USR2 薄い
            SKPaint U2_OUT= new SKPaint{
                Style = SKPaintStyle.Fill,
                Color = new SKColor (255,154,0,150),
                IsAntialias=true,
                StrokeWidth=4,
                LcdRenderText=true,
            };

            // USR3 薄い
            SKPaint U3_OUT= new SKPaint{
                Style = SKPaintStyle.Fill,
                Color = new SKColor (255,153,0,150),
                IsAntialias=true,
                StrokeWidth=4,
                LcdRenderText=true,
            };

            // 共通ユーザ名
            SKPaint NAME= new SKPaint{
                Color = new SKColor(255,255,254),
                IsAntialias=true,
                TextAlign=SKTextAlign.Center,
                LcdRenderText=true,

            };
            
            //////////////////////////////////////////////////////////////////////////
            // 初期状態 右　U1
            if (LB1==0 ) canvas.DrawCircle(1100, 70, 35, U1);
            // 配置済 || 配置をドラッグ中 || 右でドラッグ中
            if (LB1==1 || LB1==2 || LB1==3) canvas.DrawCircle(1100, 70, 35, U1_OUT);
            
            ///////////////////////////////////////////////////////////////////////////////
            // 初期状態 右 U2
            if (LB2==0 ) canvas.DrawCircle(1100, 150, 35, U2);
            // 配置済 || 配置をドラッグ中 || 右でドラッグ中
            if (LB2==1 || LB2==2 || LB2==3) canvas.DrawCircle(1100, 150, 35, U2_OUT);
            
            // 初期状態 右 U3
            if (LB3==0 ) canvas.DrawCircle(1100, 230, 35, U3);
            // 配置済 || 配置をドラッグ中 || 右でドラッグ中
            if (LB3==1 || LB3==2 || LB3==3) canvas.DrawCircle(1100, 230, 35, U3_OUT);
                

            /////////////////////////////////////////////////////////////////

            ///////////////////////////////////////////////
            // USR1 TABLE NO1 配置
            if (NO1NAME=="USR1" && LB1==1){
                canvas.DrawCircle (250,100,35,U1);
                canvas.DrawText("USR1",250,100,NAME);
            }

            // USR1 TABLE NO2 配置            
            if (NO2NAME=="USR1" && LB1==1){
                canvas.DrawCircle (500,100,35,U1);
                canvas.DrawText("USR1",500,100,NAME);
            }

            // USR1 TABLE NO3 配置            
            if (NO3NAME=="USR1" && LB1==1){
                canvas.DrawCircle (750,100,35,U1);
                canvas.DrawText("USR1",750,100,NAME);
            }


            //////////////////////////////////////////////
            // USR2 TABLE NO1 配置
            if (NO1NAME=="USR2" && LB2==1){
                canvas.DrawCircle (250,100,35,U2);
                canvas.DrawText("USR2",250,100,NAME);
            }

            // USR2 TABLE NO2 配置            
            if (NO2NAME=="USR2" && LB2==1){
                canvas.DrawCircle (500,100,35,U2);
                canvas.DrawText("USR2",500,100,NAME);
            }
            
            // USR2 TABLE NO3 配置            
            if (NO3NAME=="USR2" && LB2==1){
                canvas.DrawCircle (750,100,35,U2);
                canvas.DrawText("USR2",750,100,NAME);
            }       

            //////////////////////////////////////////////
            // USR3 TABLE NO1 配置
            if (NO1NAME=="USR3" && LB3==1){
                canvas.DrawCircle (250,100,35,U3);
                canvas.DrawText("USR3",250,100,NAME);
            }

            // USR3 TABLE NO2 配置            
            if (NO2NAME=="USR3" && LB3==1){
                canvas.DrawCircle (500,100,35,U3);
                canvas.DrawText("USR3",500,100,NAME);
            }
            
            // USR3 TABLE NO3 配置            
            if (NO3NAME=="USR3" && LB3==1){
                canvas.DrawCircle (750,100,35,U3);
                canvas.DrawText("USR3",750,100,NAME);
            }       
            

            /////////////////////////////////////////////////////////
            // 全ケース　USR1ラッグ中 移動
            if (LB1==2 || LB1==3) {
                canvas.DrawCircle (LOCAL_X,LOCAL_Y,35,U1);
                canvas.DrawText("USR1",LOCAL_X,LOCAL_Y+5,NAME);
            }

            // テーブルNo1 から移動　テーブルグレー表示
            if (LB1==2 && NO1NAME=="USR1"){
                canvas.DrawCircle (250,100,35,U1_OUT);
                canvas.DrawText("USR1",250,100,NAME);
            }

     
            //////////////////////////////////////////////////////
            // 全ケース USR2ラッグ中 移動
            if (LB2==2 || LB2==3)  {
                canvas.DrawCircle (LOCAL_X,LOCAL_Y,35,U2);
                canvas.DrawText("USR2",LOCAL_X,LOCAL_Y+5,NAME);
            }

            // テーブルNo1 から移動　テーブルグレー表示
            if (LB2==2 && NO1NAME=="USR2"){
                canvas.DrawCircle (250,100,35,U2_OUT);
                canvas.DrawText("USR2",250,100,NAME);
            }


            //////////////////////////////////////////////////////
            // 全ケース USR3ラッグ中 移動
            if (LB3==2 || LB3==3)  {
                canvas.DrawCircle (LOCAL_X,LOCAL_Y,35,U3);
                canvas.DrawText("USR3",LOCAL_X,LOCAL_Y+5,NAME);
            }

            // テーブルNo1 から移動　テーブルグレー表示
            if (LB3==2 && NO1NAME=="USR3"){
                canvas.DrawCircle (250,100,35,U3_OUT);
                canvas.DrawText("USR3",250,100,NAME);
            }
            
            /////////////////////////////////////////////////////////////////
            // TABLEグレーアウト
            ////////////////////////////////////////////////////////////////
            // NO1グレーアウト
            if(NO1NAME=="USR1" && LB1==2) {
                canvas.DrawCircle (250,100,35,U1_OUT);
                canvas.DrawText("USR1",250,100,NAME);

            }

            if(NO1NAME=="USR2" && LB2==2) {
                canvas.DrawCircle (250,100,35,U2_OUT);
                canvas.DrawText("USR2",250,100,NAME);

            }
            
            if(NO1NAME=="USR3" && LB3==2) {
                canvas.DrawCircle (250,100,35,U3_OUT);
                canvas.DrawText("USR3",250,100,NAME);

            }
   
            // NO2 グレーアウト
            if(NO2NAME=="USR1" && LB1==2) {
                canvas.DrawCircle (500,100,35,U1_OUT);
                canvas.DrawText("USR1",500,100,NAME);

            }

            if(NO2NAME=="USR2" && LB2==2) {
                canvas.DrawCircle (500,100,35,U2_OUT);
                canvas.DrawText("USR2",500,100,NAME);

            }

            if(NO2NAME=="USR3" && LB3==2) {
                canvas.DrawCircle (500,100,35,U3_OUT);
                canvas.DrawText("USR3",500,100,NAME);

            }


            // NO3 グレーアウト
            if(NO3NAME=="USR1" && LB1==2) {
                canvas.DrawCircle (750,100,35,U1_OUT);
                canvas.DrawText("USR1",750,100,NAME);

            }

            if(NO3NAME=="USR2" && LB2==2) {
                canvas.DrawCircle (750,100,35,U2_OUT);
                canvas.DrawText("USR2",750,100,NAME);

            }
        
            if(NO3NAME=="USR3" && LB3==2) {
                canvas.DrawCircle (750,100,35,U3_OUT);
                canvas.DrawText("USR3",750,100,NAME);

            }

            ////////////////////////////////////////////////////
            // ユーザ名 右 常時表示
            canvas.DrawText("USR1",1100,75,NAME);
            canvas.DrawText("USR2",1100,155,NAME);
            canvas.DrawText("USR3",1100,235,NAME);

            canvas.DrawRect (150,150,700,400,TABLE);
            canvas.DrawLine (350,80,350,630,S_LINE);
            canvas.DrawLine (650,80,650,630,S_LINE);
            canvas.DrawLine (70,280,930,280,S_LINE);
            canvas.DrawLine (70,420,930,420,S_LINE);
            canvas.DrawLine (970,0,970,700,PA_LINE);

        }



        private void GetCOLOR(int x, int y){

            Bitmap bitmap = new Bitmap(1, 1);
            Graphics graphics = Graphics.FromImage(bitmap);
        
            graphics.CopyFromScreen(new System.Drawing.Point(x, y), new System.Drawing.Point(0, 0), new System.Drawing.Size(1, 1));
            System.Drawing.Color color = bitmap.GetPixel(0, 0);
            R = color.R;
            G = color.G;
            B = color.B;
        }


        void m(string s){
            MessageBox.Show(s);
        }

    }
}

XAML

<Window x:Class="SkiaSharpSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SkiaSharpSample" xmlns:skia="clr-namespace:SkiaSharp.Views.WPF;assembly=SkiaSharp.Views.WPF" 
        xmlns:wpf="clr-namespace:SkiaSharp.Views.WPF;assembly=SkiaSharp.Views.WPF" mc:Ignorable="d"
        Title="WPF+SkiaSharp BALLDemo" Loaded="Window_Loaded" Height="710" Width="1250"  ResizeMode="NoResize">

    <Grid>
        <wpf:SKElement x:Name="MainCanvas" PaintSurface="PaintSurface" Grid.Column="0" Grid.Row="0"  MouseLeftButtonDown="MainCanvas_MouseLeftButtonDown" MouseMove="MainCanvas_MouseMove" MouseLeftButtonUp="MainCanvas_MouseLeftButtonUp"  />
    </Grid>
 
</Window>