平台简介 


         Z平台是开源免费的JAVA快速开发平台，并且承诺永久开源免费。通过Z平台集成开发环境，以零编码、动态配置的方式能够快速开发BS管理系统。同时该平台还可以做为APP、微信、各种小程序等项目的服务端来使用，为前端项目提供数据接口。并且Z平台也内置了代码生成器组件，可以通过生成代码方式来完成项目的客户化的开发工作。另外，Z平台所用到的各种功能组件与框架，都是开源免费的，不涉及到版权问题，商业与非商业项目都可以放心使用。


官方网站


https://www.zframeworks.com/


平台价值



	
提升软件开发速度，缩短软件开发周期。
	
	

	
降低软件开发BUG率，缩短软件测试周期。
	
	

	
降低项目所需高级开发人员比例，减少项目用工成本支出。
	


平台特点


永久开源免费

Z平台为开源免费项目，可以应用在所有商业或非商业项目中进行使用。

学习成本低

Z平台所使用的框架都是热门的开源技术框架。学习资料丰富。核心框架为Spring + SpringMVC + Mybatis组成。

技术成熟稳定

Z平台所应用的基础框架都是经过长时间沉淀成熟稳定的开源框架。在稳定性方面值得信赖。

李子果 原创。。。

最近在做一个山寨版的王者荣耀，刚开始做的时候毫无头绪 摇杆的多点触控做的特别烂

经过几天的思考已完美解决所有问题，下面就和大家分享下这个摇杆的开发思路（此教程不包含游戏源码）

若有不正之处，请多多谅解并欢迎指正。

首先这个摇杆要用到较多的数学知识，小编的数学特别烂也就高中水平吧

我们这个摇杆一共就五个按钮，一个移动摇杆、三个技能摇杆和一个普通攻击按钮

最终效果



好了废话少说让我们开始吧

新建一个项目



建好项目之后，我们先新建一个类叫做“画”。也是我们的主View



修改Hua.java的代码

public class Hua extends RelativeLayout implements Runnable{ //继承RelativeLayout 实现Runnable接口

    private Paint p;//画笔

    public Hua(Context context) {
        super(context);
        p=new Paint();
        setBackgroundColor(Color.BLACK);//背景颜色设为黑色
    }

    @Override
    protected void onDraw(Canvas g) {//重写onDraw方法
        super.onDraw(g);
    }

    @Override
    public void run() {

    }
}

接下来我们做移动摇杆

 

我们要准备一张图片（待会我会把图片都丢在附件里）

 

首先用ps画一个这样半透明的圆ps部分就不做教程了



把背景隐藏掉 保存为png格式

 

把我们刚刚制作的图片添加进来



先新建一个类 my.java

public class my { //这个类当一个全局变量使用
    public static int w,h;//屏幕的宽高
    public static float bili;
    public static MainActivity main;
    public static RectF re=new RectF();
    public static int ontouchAlpha=100;//触控区透明度0-255 0为透明，为了测试我们先设为100
}

修改 MainActivity 的代码

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        my.main=this;
        getSupportActionBar().hide();//隐藏标题栏
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);//全屏 隐藏状态栏
        //判断当前是否横屏 如果不是就设为横屏，设为横屏之后会自动调用onCreate方法
        if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
            //获取屏幕的宽高
            DisplayMetrics dis = getResources().getDisplayMetrics();
            my.w = dis.widthPixels;
            my.h = dis.heightPixels;
            //获取屏幕分辨率和1920*1080的比例 以便适应不同大小的屏幕
            my.bili = (float) (Math.sqrt(my.w * my.h) / Math.sqrt(1920 * 1080));
            setContentView(new Hua(this));
        } else {
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);// 横屏
        }
    }
}

新建类 Move.java

package com.yaogan.liziguo.yaogan;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;

/**
 * Created by Liziguo on 2018/6/15.
 */

public class Move {
    private float x1,y1;//按下时的坐标 大圆
    private float x2,y2;//移动后的坐标 小圆
    private final float r1,r2;//r1大圆的半径 r2小圆的半径
    public float angle;//x1y1指向x2y2的角度 弧度制
    public boolean down=false;//判断是否被按下
    public boolean in=false;//判断小圆是否在大圆里面，简单的说就是防止小圆被脱太远
    public boolean move=false;//判断手指按下后是否移动（MY实际开发中用到,该教程用不到此变量）
    public Bitmap img;//大圆小圆的图片

    public Move(){
        r1 = 480 * 0.5f * my.bili;//乘上一个比例 适应不同大小的屏幕
        r2 = 300 * 0.5f * my.bili;
        img= BitmapFactory.decodeResource(my.main.getResources(),R.mipmap.yaogan);//初始化摇杆图片
    }

    public void down(float xx,float yy){ //摇杆按下后的操作
        if(xx<r1) x1=r1;
        else x1 = xx;

        if(my.h-yy<r1) y1=my.h-r1;
        else y1 = yy;
        //上面的代码是防止按下的位置太靠近屏幕边缘
        //跟x1=xx;y1=yy;区别不大，待会可以改成x1=xx;y1=yy;看看效果有什么不同
        down=true;
    }
    public void move(float xx,float yy){ //按下摇杆后移动的操作
        angle=getAngle(xx,yy);
        in=in(xx, yy);
        move=isMove(xx,yy);
        if (!in) {
            //下面会做解释
            xx= (float) (x1+ Math.sin(angle)*r1*0.7f);
            yy= (float) (y1+ Math.cos(angle)*r1*0.7f);
        }
        x2=xx;
        y2=yy;
    }
    public void up(){ //松开后的操作
        down=false;
    }

    public float getAngle(float xx,float yy){ //获取x1y1指向x2y2的角度
        double angle,k;
        if (y1==yy)//斜率不存在时
            if (x1 > xx)//判断x1指向x2的方向
                angle=-Math.PI/2;
            else
                angle=Math.PI/2;
        else{
            k=(x1-xx)/(y1-yy); //两点的坐标求斜率,至于为什么是(x1-x2)/(y1-y2)不是(y1-y2)/(x1-x2)待会我们再做解释
            if (y1 > yy) {//判断x1y1指向x2y2的方向
                // 用反tan求角度 这个高中好像没学过 既然Math类已经帮我们封装好了就直接拿来用吧
                angle=Math.atan(k) + Math.PI;
            } else {
                angle=Math.atan(k);
            }
            //这段可写可不写 让计算出来的角度属于-PI/2到PI/2
            if(angle>Math.PI)
                angle-=Math.PI*2;
            else if(angle<-Math.PI)
                angle+=Math.PI*2;
        }
        return (float) angle;
    }

    public boolean in(float xx, float yy) { //防止小圆被脱太远 拖动范围不超出r1的70%
        double r = Math.sqrt((x1 - xx) * (x1 - xx) + (y1 - yy) * (y1 - yy));//两点间距离公式
        if (r < r1*0.7f)
            return true;
        else return false;
    }
    public boolean isMove(float xx, float yy) { //判断按下摇杆后 是否移动,如果x1y1 x2y2的距离大于r1*0.15视为移动
        // MY实际开发中用到,该教程用不到此变量
        double r = Math.sqrt((x1 - xx) * (x1 - xx) + (y1 - yy) * (y1 - yy));//两点间距离公式
        if (r > r1*0.15f)
            return true;
        else return false;
    }
    public void onDraw(Canvas g, Paint p){ //画摇杆
        if(down) { //当摇杆被按下时 才显示
            //怎么用Canvas画图这里就不说了
            my.re.left = x1 - r1;
            my.re.top = y1 - r1;
            my.re.right = x1 + r1;
            my.re.bottom = y1 + r1;
            g.drawBitmap(img, null, my.re, p); //画大圆
            my.re.left = x2 - r2;
            my.re.top = y2 - r2;
            my.re.right = x2 + r2;
            my.re.bottom = y2 + r2;
            g.drawBitmap(img, null, my.re, p); //画小圆
        }
    }
}

新建类 OnTouchMove.java 

package com.yaogan.liziguo.yaogan;

import android.content.Context;
import android.graphics.Color;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by Liziguo on 2018/6/16.
 */

public class OnTouchMove extends View { //这个view负责监听移动摇杆的手势
    
    private Move m;
    
    public OnTouchMove(Context context,Move move) {
        super(context);
        this.m=move;
        setBackgroundColor(Color.WHITE);//背景色设为白色
        getBackground().setAlpha(my.ontouchAlpha);//设置触控区透明度
        setOnTouchListener(new OnTouchListener() { //设置触控监听
            @Override
            public boolean onTouch(View v, MotionEvent ev) {
                //加上getX() getY()因为这个view不是分布在左上角的
                final float xx = ev.getX() + getX(), yy = ev.getY() + getY();

                if (ev.getAction() == MotionEvent.ACTION_DOWN) {
                    m.down(xx, yy);//按下时的操作
//                    m.move(xx, yy);
                }
                m.move(xx, yy);//移动时的操作
                if (ev.getAction() == MotionEvent.ACTION_UP) {
                    m.up();//松开时的操作
                }
                return true;//不要返回false
            }
        });
    }
}

修改 Hua.java 的代码

package com.yaogan.liziguo.yaogan;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.widget.RelativeLayout;

/**
 * Created by Liziguo on 2018/6/15.
 */

public class Hua extends RelativeLayout implements Runnable{ //继承RelativeLayout 实现Runnable接口

    private Paint p;//画笔
    private Move m=new Move();//移动摇杆

    public Hua(Context context) {
        super(context);
        p=new Paint();
        setBackgroundColor(Color.BLACK);//背景颜色设为黑色
        //实例化一个OnTouchMove
        OnTouchMove onTouchMove=new OnTouchMove(context,m);
        //把onTouchMove添加进来 宽度为屏幕的1/3 高度为屏幕的1/2
        addView(onTouchMove,my.w/3,my.h/2);
        //设置onTouchMove的位置
        onTouchMove.setX(0);
        onTouchMove.setY(my.h/2);

        new Thread(this).start();//启动重绘线程
    }

    @Override
    protected void onDraw(Canvas g) {//重写onDraw方法
        super.onDraw(g);
        m.onDraw(g,p);//画移动摇杆
    }

    @Override
    public void run() { //每隔20毫秒刷新一次画布
        while(true){
            try {Thread.sleep(20);} catch (InterruptedException e) {e.printStackTrace();}
            postInvalidate();//重绘 在子线程重绘不能调用Invalidate()方法
        }
    }
}

好的 现在我们的摇杆可以说已经做好一大半了，因为剩下的原理都一样

先运行一遍看看效果吧



左下角的白色矩形是我们的OnTouchMove类，为了更好的测试我们先让他显示出来 等做好了再隐藏掉

下面我们来解释一下为什么斜率k=(x1-x2)/(y1-y2)而不是(y1-y2)/(x1-x2)吧

因为我们手机上的平面直角坐标系跟数学上的平面直角坐标系不一样

数学上的平面直角坐标系是这样的



而我们手机是这样的



有没有发现把手机的坐标系 逆时针旋转一下就是数学里的坐标系了，不过x跟y调了一下位置

所以我们在写代码的时候把x y换一下就行了

数学坐标系中k=1的直线



程序中k=1的直线



再解释下 Move 类的 move方法

 

public void move(float xx,float yy){ //按下摇杆后移动的操作
        angle=getAngle(xx,yy);
        in=in(xx, yy);
        move=isMove(xx,yy);
        if (!in) {
            //下面会做解释
            xx= (float) (x1+ Math.sin(angle)*r1*0.7f);
            yy= (float) (y1+ Math.cos(angle)*r1*0.7f);
        }
        x2=xx;
        y2=yy;
    }



 

不知不觉已经凌晨2:46了，今天就写到这吧

 

明天继续。。。。。。

 

好的下面我们开始做技能摇杆，这教程做的比较累啊

下面的技能类是我直接从我游戏里拷贝过来的并做了些小修改

解释可能没那么清楚毕竟原理都一样

只不过是多了几个功能而已

 

准备图片



 

添加到工程里



由于图片比较多 我们加载图的代码位置改一下

修改 MainActivity。java 和 my.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        my.main=this;
        getSupportActionBar().hide();//隐藏标题栏
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);//全屏 隐藏状态栏
        //判断当前是否横屏 如果不是就设为横屏，设为横屏之后会自动调用onCreate方法
        if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
            //获取屏幕的宽高
            DisplayMetrics dis = getResources().getDisplayMetrics();
            my.w = dis.widthPixels;
            my.h = dis.heightPixels;
            //获取屏幕分辨率和1920*1080的比例 以便适应不同大小的屏幕
            my.bili = (float) (Math.sqrt(my.w * my.h) / Math.sqrt(1920 * 1080));
            //加载图片
            my.border= BitmapFactory.decodeResource(my.main.getResources(),R.mipmap.border);
            my.cancel= BitmapFactory.decodeResource(my.main.getResources(),R.mipmap.cancel);
            my.down= BitmapFactory.decodeResource(my.main.getResources(),R.mipmap.down);
            my.yaogan= BitmapFactory.decodeResource(my.main.getResources(),R.mipmap.yaogan);
            my.cd= BitmapFactory.decodeResource(my.main.getResources(),R.mipmap.cd);
            setContentView(new Hua(this));
        } else {
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);// 横屏
        }
    }
}

public class my { //这个类当一个全局变量使用
    public static int w,h;//屏幕的宽高
    public static float bili;
    public static MainActivity main;
    public static RectF re=new RectF();
    public static int ontouchAlpha=100;//触控区透明度0-255 0为透明，为了测试我们先设为100

    public static Bitmap border,cancel,down,yaogan,cd;

    public static Skill skill;//当前正在使用的技能 现在会报错 因为我们还没新建技能Skill类
}

修改 Move 类的构造方法

    public Move(){
        r1 = 480 * 0.5f * my.bili;//乘上一个比例 适应不同大小的屏幕
        r2 = 300 * 0.5f * my.bili;
//      img= BitmapFactory.decodeResource(my.main.getResources(),R.mipmap.yaogan);//初始化摇杆图片
        img=my.yaogan;
    }

 

 

新建技能类 Skill.java

 

 

package com.yaogan.liziguo.yaogan;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;

/**
 * Created by Liziguo on 2018/6/16.
 */

public abstract class Skill {
    public int jineng;
    private final float x,y;//技能图标中心位置，不是按下时的位置
    private float x2, y2;//技能按下移动后手指的坐标
    private float xxx,yyy;//判断拖动点是否超出两倍r的范围
    private final float calcelx, cancely;
    public float angle;//技能按下后 x y指向xx yy的角度
    public Bitmap img, imgborder, imgdown, imgyaogan,imgcd,imgcancel;
    private final float r2;
    private final float r3=50*my.bili;
    public boolean down=false;
    public boolean down_main=false;//down_main 只触发一次;
    public boolean cancel=false;
    public int cdmax;
    public long last,cd=0;//last最后一次释放技能的时间
    /*
    0 普通攻击
    1 技能1
    2 技能2
    3 技能3
     */
    public Skill(int jineng, int cd, Bitmap image){
        this.jineng=jineng;
        switch (jineng){
            case 0:
                x= my.w*0.87f;
                y= my.h*0.8f;
                break;
            case 1:
                x= my.w*0.7f;
                y= my.h*0.88f;
                break;
            case 2:
                x= my.w*0.75f;
                y= my.h*0.62f;
                break;
            case 3:
                x= my.w*0.9f;
                y= my.h*0.5f;
                break;
            default:x=y=0;
        }
        cdmax=cd;
        if(jineng == 0) r2=125*my.bili;
        else r2=80*my.bili;
        calcelx =my.w-r2*2;
        cancely =my.h/4;
        img=image;
        imgborder=my.border;
        imgdown=my.down;
        imgyaogan=my.yaogan;
        imgcd=my.cd;
        imgcancel=my.cancel;
    }
    //    public abstract void down();
//    public abstract void move();
//    public abstract void up();
    public void down(){ //DOWN 由ontouch触发
        if(cd>0)return;
        down=true;
        my.skill=this;
    }
    public abstract void down_main(); //DOWN 教程用不到该抽象方法

    public void move(float x,float y){//按下技能后 由ontouch触发
        x2 =x;
        y2 =y;
        angle=getAngle(x2, y2);
        cancel=incancel(x,y);
        if (jineng !=0 && !in2(x,y)) {
            xxx= (float) (this.x+ Math.sin(angle)*r2*2);
            yyy= (float) (this.y+ Math.cos(angle)*r2*2);
        }else{
            xxx=x;
            yyy=y;
        }
    }
    public abstract void move_main();//按下技能后 由MyActor触发 教程用不到该抽象方法
    public abstract void up(); //松开后 由MyActor触发 释放技能

    public boolean in(float xx,float yy){ //判断是否被点中
        double r= Math.sqrt((x - xx)*(x-xx)+(y-yy)*(y-yy));
        if(r<r2)
            return true;
        else return false;
    }
    public boolean in2(float xx, float yy) { //判断拖动点是否超出两倍r的范围
        double r = Math.sqrt((x - xx) * (x - xx) + (y - yy) * (y - yy));
        if (r < r2 * 2)
            return true;
        else return false;
    }
    public boolean incancel(float xx,float yy){ //判断是否取消
        double r= Math.sqrt((calcelx - xx)*(calcelx -xx)+(cancely -yy)*(cancely -yy));
        if(r<r2)
            return true;
        else return false;
    }
    public float getAngle(float xx,float yy){ //x y指向xx yy的角度
        float angle,k;
        if (y==yy)
            if (x > xx)
                angle= (float) (-Math.PI/2);
            else
                angle= (float) (Math.PI/2);
        else{
            k=(x-xx)/(y-yy);
            if (y > yy) {
                angle= (float) (Math.atan(k) + Math.PI);
            } else {
                angle= (float) Math.atan(k);
            }
            if(angle>Math.PI)
                angle-=Math.PI*2;
            else if(angle<-Math.PI)
                angle+=Math.PI*2;

        }
        return angle;
    }
    private float drawpx=10*my.bili;

    public void next(){
        //计算技能冷却时间
        cd=cdmax-System.currentTimeMillis()+last;
    }
    //按下的时候技能图标下移 显示蓝色框框
    public void onDraw(Canvas g, Paint p){
        my.re.left=x-r2;
        my.re.top=y-r2;
        my.re.right=x+r2;
        my.re.bottom=y+r2;
        if(down){
//            new RectF(x-r2,y-r2,x+r2,y+r2);
//            new RectF(x-r2,y-r2+10*my.bili,x+r2,y+r2+10*my.bili);
//            my.re.left=x-r2;
//            my.re.top=y-r2;
//            my.re.right=x+r2;
//            my.re.bottom=y+r2;
            if(jineng!=0){
                final float bl=2;
                my.re.left=x-r2*bl;
                my.re.top=y-r2*bl;
                my.re.right=x+r2*bl;
                my.re.bottom=y+r2*bl;
                //蓝色框框未下移
                g.drawBitmap(imgdown,null,my.re,p);
            }
            my.re.left=x-r2;
            my.re.top=y-r2;
            my.re.right=x+r2;
            my.re.bottom=y+r2;
            ///
            //技能图片和技能边框下移
            my.re.top+=drawpx;
            my.re.bottom+=drawpx;
            g.drawBitmap(img,null,my.re,p);
            my.re.left-=drawpx;
            my.re.top-=drawpx;
            my.re.right+=drawpx;
            my.re.bottom+=drawpx;

            g.drawBitmap(imgborder,null,my.re,p);
            if(jineng!=0){
                my.re.left=xxx-r3;
                my.re.top=yyy-r3;
                my.re.right=xxx+r3;
                my.re.bottom=yyy+r3;
                g.drawBitmap(imgyaogan,null,my.re,p);
                //cancle
                my.re.left= calcelx -r2;
                my.re.top= cancely -r2;
                my.re.right= calcelx +r2;
                my.re.bottom= cancely +r2;
                g.drawBitmap(imgcancel,null,my.re,p);
            }
        }else{
            g.drawBitmap(img,null,my.re,p);
            if(jineng!=0 && cd>0) {
                p.setTextSize(40*my.bili);
                p.setColor(Color.WHITE);
                g.drawBitmap(imgcd,null,my.re,p);
                float f=cd/100f;
                f=(int)f;
                f=f/10;
                g.drawText(String.valueOf(f),x-p.getTextSize()*4/5,y+p.getTextSize()/3,p);

            }
            my.re.left-=drawpx;
            my.re.top-=drawpx;
            my.re.right+=drawpx;
            my.re.bottom+=drawpx;
            g.drawBitmap(imgborder,null,my.re,p);
        }
    }
}

新建一个类 OnTouchSkill.java 他也是一个监听view

这样多点触控会好写很多，刚开始我是用一个view做监听的 写到我心态爆炸。。。

package com.yaogan.liziguo.yaogan;

import android.content.Context;
import android.graphics.Color;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by Liziguo on 2018/6/16.
 */

public class OnTouchSkill extends View {
    /*
    A 普通攻击
    Q 技能1
    W 技能2
    E 技能3
    R 没有R
     */

    public Skill A,Q,W,E;

    public OnTouchSkill(Context context,Skill a,Skill q,Skill w,Skill e) {
        super(context);
        A=a;Q=q;W=w;E=e;
        setBackgroundColor(Color.WHITE);
        getBackground().setAlpha(my.ontouchAlpha);//0-255
        setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent ev) {
                final float xx = ev.getX() + getX(), yy = ev.getY() + getY();
                if (ev.getAction() == MotionEvent.ACTION_DOWN) {
                    if ( A.in(xx, yy)) {
                        A.down();
                    } else if ( Q.in(xx, yy)) {
                        Q.down();
                    } else if ( W.in(xx, yy)) {
                        W.down();
                    } else if ( E.in(xx, yy)) {
                        E.down();
                    }

                }
                if (my.skill != null) my.skill.move(xx, yy);
                if(ev.getAction()==MotionEvent.ACTION_UP){
                    A.down = false;
                    Q.down = false;
                    W.down = false;
                    E.down = false;
                }
                return true;
            }
        });
    }
}

把监听控件添加到Hua，修改 Hua.java

package com.yaogan.liziguo.yaogan;

import android.content.Context;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.widget.RelativeLayout;

/**
 * Created by Liziguo on 2018/6/15.
 */

public class Hua extends RelativeLayout implements Runnable{ //继承RelativeLayout 实现Runnable接口

    private Paint p;//画笔
    private Move m=new Move();//移动摇杆

     /*
    A 普通攻击
    Q 技能1
    W 技能2
    E 技能3
    R 没有R
     */

    public Skill A=new Skill(0,100, BitmapFactory.decodeResource(getResources(),R.mipmap.putonggongji)) {
        @Override
        public void down_main() { }
        @Override
        public void move_main() { }
        @Override
        public void up() { }
    };
    public Skill Q=new Skill(1,1000, BitmapFactory.decodeResource(getResources(),R.mipmap.skill1)) {
        @Override
        public void down_main() { }
        @Override
        public void move_main() { }
        @Override
        public void up() {
            down_main=false;
            if(!cancel){ //技能冷却时间
                last= System.currentTimeMillis();
            }
        }
    };
    public Skill W=new Skill(2,1000, BitmapFactory.decodeResource(getResources(),R.mipmap.skill2)) {
        @Override
        public void down_main() { }
        @Override
        public void move_main() { }
        @Override
        public void up() {
            down_main=false;
            if(!cancel){
                last= System.currentTimeMillis();
            }
        }
    };
    public Skill E=new Skill(3,1000, BitmapFactory.decodeResource(getResources(),R.mipmap.skill3)) {
        @Override
        public void down_main() { }
        @Override
        public void move_main() { }
        @Override
        public void up() {
            down_main=false;
            if(!cancel){
                last= System.currentTimeMillis();
            }
        }
    };

    public Hua(Context context) {
        super(context);
        p=new Paint();
        setBackgroundColor(Color.BLACK);//背景颜色设为黑色
        //实例化一个OnTouchMove
        OnTouchMove onTouchMove=new OnTouchMove(context,m);
        //把onTouchMove添加进来 宽度为屏幕的1/3 高度为屏幕的1/2
        addView(onTouchMove,my.w/3,my.h/2);
        //设置onTouchMove的位置
        onTouchMove.setX(0);
        onTouchMove.setY(my.h/2);

        //添加技能摇杆监听
        OnTouchSkill onTouchSkill=new OnTouchSkill(context,A,Q,W,E);//后添加的优先级高
        addView(onTouchSkill);
        onTouchSkill.setX(my.w*0.7f-85*my.bili);
        onTouchSkill.setY(my.h/2-85*my.bili);
        new Thread(this).start();//启动重绘线程
    }

    @Override
    protected void onDraw(Canvas g) {//重写onDraw方法
        super.onDraw(g);
        m.onDraw(g,p);//画移动摇杆
        //画技能
        A.onDraw(g,p);
        Q.onDraw(g,p);
        W.onDraw(g,p);
        E.onDraw(g,p);
    }

    @Override
    public void run() { //每隔20毫秒刷新一次画布
        while(true){
            try {Thread.sleep(20);} catch (InterruptedException e) {e.printStackTrace();}
            //计算冷却时间
            A.next();
            Q.next();
            W.next();
            E.next();
            //释放技能
            if (my.skill != null) {
                my.skill.down_main();//教程用不到该方法
                my.skill.move_main();//教程用不到该方法
                if (my.skill.down == false) {
                    my.skill.up();
                    my.skill = null;
                }
            }

            postInvalidate();//重绘 在子线程重绘不能调用Invalidate()方法
        }
    }
}

运行下看看效果吧



修改 my.java

public class my { //这个类当一个全局变量使用
    public static int w,h;//屏幕的宽高
    public static float bili;
    public static MainActivity main;
    public static RectF re=new RectF();
    public static int ontouchAlpha=0;//把触控区透明度改成0

    public static Bitmap border,cancel,down,yaogan,cd;

    public static Skill skill;//当前正在使用的技能
}

 

再运行下

 



大功告成

下载地址：https://download.csdn.net/download/u010756046/10482434

PS:图片不要太大 尽量压缩到20kb以下，不然使用摇杆会很卡

 

本文链接: https://blog.csdn.net/xietansheng/article/details/72814492
0. JavaSwing 简介
Java Swing 图形界面开发简介
1. JavaSwing 布局管理器
JavaSwing_1.1: FlowLayout（流式布局）
JavaSwing_1.2: GridLayout（网格布局）
JavaSwing_1.3: GridBagLayout（网格袋布局）
JavaSwing_1.4: BoxLayout（箱式布局）
JavaSwing_1.5: GroupLayout（分组布局）
JavaSwing_1.6: CardLayout（卡片布局）
JavaSwing_1.7: BorderLayout（边界布局）
JavaSwing_1.8: SpringLayout（弹性布局）
JavaSwing_1.9: null（绝对布局）
2. JavaSwing 基本组件
JavaSwing_2.1: JLabel（标签）
JavaSwing_2.2: JButton（按钮）
JavaSwing_2.3: JRadioButton（单选按钮）
JavaSwing_2.4: JCheckBox（复选框）
JavaSwing_2.5: JToggleButton（开关按钮）
JavaSwing_2.6: JTextField（文本框）
JavaSwing_2.7: JPasswordField（密码框）
JavaSwing_2.8: JTextArea（文本区域）
JavaSwing_2.9: JComboBox（下拉列表框）
JavaSwing_2.10: JList（列表框）
JavaSwing_2.11: JProgressBar（进度条）
JavaSwing_2.12: JSlider（滑块）
3. JavaSwing 面板组件
JavaSwing_3.1: JPanel（面板）
JavaSwing_3.2: JScrollPane（滚动面板）
JavaSwing_3.3: JSplitPane（分隔面板）
JavaSwing_3.4: JTabbedPane（选项卡面板）
JavaSwing_3.5: JLayeredPane（层级面板）
4. JavaSwing 其他组件
JavaSwing_4.1: JFrame（窗口）
JavaSwing_4.2: JDialog、JOptionPane（对话框）
JavaSwing_4.3: JFileChooser（文件选择器）
JavaSwing_4.4: JColorChooser（颜色选择器）
JavaSwing_4.5: JMenuBar（菜单栏）
JavaSwing_4.6: JToolBar（工具栏）
JavaSwing_4.7: JPopupMenu（弹出菜单）
JavaSwing_4.8: JTable（表格）
JavaSwing_4.9: JTree（树）
JavaSwing_4.10: JInternalFrame（内部窗口）
5. JavaSwing 相关特性
JavaSwing_5.1: 组件的位置和尺寸
JavaSwing_5.2: 组件边框（Border）
JavaSwing_5.3: 事件处理
JavaSwing_5.4: 多线程并发与线程安全
JavaSwing_5.5: 拖拽功能
JavaSwing_5.6: 系统托盘（System Tray）
JavaSwing_5.7: 闪屏（Splash Screen）
扩展：Java AWT/Swing 其他相关
Java绘图: 使用Graphics类绘制线段、矩形、椭圆/圆弧/扇形、图片、文本
Java图片操作 — 图片的读取、绘制、缩放、裁剪、保存
Java代码截屏：使用 Java 代码截取电脑屏幕并保存
Java模拟鼠标键盘输入事件 — Robot 类
Java操作桌面应用 — Desktop 类
Java操作系统剪贴板(Clipboard)实现复制和粘贴

前言

现在微信小程序越来越火了，相信不少人都通过各种途径学习过微信小程序或者尝试开发，作者就是曾经由于兴趣了解开发过微信小程序，最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的一些经验和一些心得吧。


主要内容

springboot后端架构构建

小程序项目构建

小程序api调用

后台resetful接口编写

小程序调用后台接口

免费的https申请

linux下部署上线


微信小程序项目构建

这些基础的东西我就不过多介绍，大家在刚开始开发的时候一般都没有自己的服务器及域名，所以大家在本地编写的时候，在“详细”下的“项目设置”里面将“不校验域名安全性”勾选。

至于微信小程序的组件，即前端页面的开发希望大家耐住寂寞认真在微信开发平台上，组件https://developers.weixin.qq.com/miniprogram/dev/component/及api：https://developers.weixin.qq.com/miniprogram/dev/api/


后端详解

我在后端编写主要是用java，当然对其他开发语言熟悉的也可以使用其他语言开发后端。现在我就java编写后端api的讲解。主要框架springboot，开发工具myeclipse，服务器阿里云服务器。

创建一个maven项目，导入相关依赖：

pom.xml依赖


    <!-- 统一版本控制 -->
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.9.RELEASE</version>
	</parent>
	<dependencies>
		<!-- freemarker渲染页面 -->
		<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-freemarker -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-freemarker</artifactId>
		</dependency>

		<!-- spring boot 核心 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<!-- springboot整合jsp -->
		<!-- tomcat 的支持. -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
			<exclusions>
				<exclusion>
					<groupId>org.springframework.boot</groupId>
					<artifactId>spring-boot-starter-tomcat</artifactId>
				</exclusion>
			</exclusions>
		</dependency>

		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>
	</dependencies>

在配置文件src/main/resources/下创建application.properties文件可以修改一些配置参数等。
#jsp支持
spring.mvc.view.suffix=.jsp
spring.mvc.view.prefix=/WEB-INF/jsp/
#this is set port
#server.port=80
server.port=443
#添加ssl证书
#ssl证书文件名
server.ssl.key-store=classpath:xxxxxxx.pfx
server.ssl.key-store-password=xxxxxxxx
server.ssl.keyStoreType=xxxxxxxx

在实际项目中可能涉及数据库，还要整合mybatis，在文章中，我仅仅做测试就不做使用数据库的测试。

首先创建springboot的入口程序:app.class下面贴上代码：
@ComponentScan(basePackages= "com.bin")//添加扫包@ComponentScan(basePackages= "")
@EnableAutoConfiguration
public class App{

	//启动springboot
	public static void main(String[] args) {
		SpringApplication.run(App.class, args);
	}
}

启动项目时直接右击run即可。

在写一个测试的controller进行微信小程序与java后端实现通信，controller代码如下：
@RestController
@SpringBootApplication
public class ControllerText {
	
	@RequestMapping("getUser")
	public Map<String, Object> getUser(){
		System.out.println("微信小程序正在调用。。。");
		Map<String, Object> map = new HashMap<String, Object>();
		List<String> list = new ArrayList<String>();
 		list.add("zhangsan");
 		list.add("lisi");
 		list.add("wanger");
 		list.add("mazi");
 		map.put("list",list);
		System.out.println("微信小程序调用完成。。。");
		return map;
	}
	
	@RequestMapping("getWord")
	public Map<String, Object> getText(String word){
		Map<String, Object> map = new HashMap<String, Object>();
		String message = "我能力有限，不要为难我";
		if ("后来".equals(word)) {
			message="正在热映的后来的我们是刘若英的处女作。";
		}else if("微信小程序".equals(word)){
			message= "想获取更多微信小程序相关知识，请更多的阅读微信官方文档，还有其他更多微信开发相关的内容，学无止境。";
		}else if("西安工业大学".equals(word)){
			message="西安工业大学（Xi'an Technological University）简称”西安工大“，位于世界历史名城古都西安，是中国西北地区唯一一所以兵工为特色，以工为主，理、文、经、管、法协调发展的教学研究型大学。原中华人民共和国兵器工业部直属的七所本科院校之一（“兵工七子”），陕西省重点建设的高水平教学研究型大学、陕西省人民政府与中国兵器工业集团、国防科技工业局共建高校、教育部“卓越工程师教育培养计划”试点高校、陕西省大学生创新能力培养综合改革试点学校。国家二级保密资格单位，是一所以\"军民结合，寓军于民\"的国防科研高校。";
		}
		map.put("message", message);
		return map;
	}
	
	@RequestMapping("")
	public String getText(){
		return "hello world";
	}


}

至此简易的后端框架及测试基本完成。

说明：@RestController与@Controller注解的区别@RestController相当于两个注解，它能实现将后端得到的数据在前端页面（网页）中以json串的形式传递。而微信小程序与后台之间的数据传递就是以json报文的形式传递。所以这就是选择springboot框架开发小程序后端的主要原因之一。可以方面我们进行小程序的后端开发。

小程序发起网络请求

在完成了小程序的后端开发，下面进行小程序端发起网络请求。

下面以一个简单的按钮请求数据为例：

wxml文件

<button bindtap='houduanButton1'>点击发起请求</button>
<view wx:for="{{list}}">
    姓名：{{item}}
  </view>

js文件

 /**
   * 页面的初始数据
   */
  data: {
    list: '',
    word: '',
    message:''

  },
  houduanButton1: function () {
    var that = this;
    wx.request({
      url: 'http://localhost:443/getUser',
      method: 'GET',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data)//打印到控制台
        var list = res.data.list;
        if (list == null) {
          var toastText = '数据获取失败';
          wx.showToast({
            title: toastText,
            icon: '',
            duration: 2000
          });
        } else {
          that.setData({
            list: list
          })
        }
      }
    })
  }

主要调用的api就是wx.request，想知道将详细的介绍大家可以去微信公众平台。

接下来以搜索类型的请求为例：

wxml文件：
 <input type="text" class="houduanTab_input" placeholder="请输入你要查询的内容" bindinput='houduanTab_input'></input>
  <button bindtap='houduanButton2'>查询</button>
  <view wx:if="{{message!=''}}">
    {{message}}
  </view>

js文件：变量的定义见上一个js文件
//获取输入框的内容
  houduanTab_input: function (e) {
    this.setData({
      word: e.detail.value
    })
  },
  // houduanButton2的网络请求
  houduanButton2: function () {
    var that = this;
    wx.request({
      url: 'http://localhost:443/getWord',
      data:{
        word: that.data.word
      },
      method: 'GET',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data)//打印到控制台
        var message = res.data.message;
        if (message == null) {
          var toastText = '数据获取失败';
          wx.showToast({
            title: toastText,
            icon: '',
            duration: 2000
          });
        } else {
          that.setData({
            message: message
          })
        }
      }
    })
  }

至此已经完成了简易的微信小程序端与java后端进行通信。

现在可以在启动后端项目在微信开发工具上进行测试。

演示效果：





所以至此已经完成了小程序的前后端通信。

https申请

其实也不算什么申请，在购买域名之后可以申请免费的ssl证书，在前面的配置文件application.properties中有证书的配置，将证书的pfx文件直接添加到后端项目下即可。
购买服务器部署后端api代码

对于springboot项目，本人建议打jar，直接在服务器上部署即可，在服务器上只需要安装对应版本的jdk即可。项目部署命令：

我购买的是阿里云的轻量级应用服务器部署的。比较划算吧。

运行命令： nohup java -jar helloworld.jar &

nohup的意思不挂服务，常驻的意思，除非云服务器重启，那就没法了；最后一个&表示执行命令后要生成日志文件nohup.out。

当然还可以使用java -jar helloworld.jar
源码：链接: https://pan.baidu.com/s/1PfByFfEgqkVALcc3PRhn9w 提取码: c7yf
结束语：由于时间篇幅问题，本人介绍的内容很有限，希望对这方面有兴趣的你能有帮助。共同进步。

觉得有帮助，给个赞赏吧。给赞赏的优先同意qq或者微信，问问题秒回复等[滑稽]，谢谢老铁。