Android通过Path实现复杂效果（搜索按钮+时钟的实现）-低调大师

Android通过Path实现复杂效果（搜索按钮+时钟的实现）

2016-09-08 761

Path ：

在Android中复杂的图形的绘制绝大多数是通过path来实现，比如绘制一条曲线，然后让一个物体随着这个曲线运动，比如搜索按钮，比如一个简单时钟的实现：

那么什么是path呢！

定义：path 就是路径，就是图形的路径的集合，它里边包含了路径里边的坐标点，等等的属性。我们可以获取到任意点的坐标，正切值。

那么要获取Path上边所有点的坐标还需要用到一个类,PathMeasure;

PathMesure:

PathMeasure是一个用来测量Path的类，主要有以下方法:

构造方法

方法名	释义
PathMeasure()	创建一个空的PathMeasure
PathMeasure(Path path, boolean forceClosed)	创建 PathMeasure 并关联一个指定的Path(Path需要已经创建完成)。

公共方法

返回值	方法名	释义
void	setPath(Path path, boolean forceClosed)	关联一个Path
boolean	isClosed()	是否闭合
float	getLength()	获取Path的长度
boolean	nextContour()	跳转到下一个轮廓
boolean	getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo)	截取片段
boolean	getPosTan(float distance, float[] pos, float[] tan)	获取指定长度的位置坐标及该点切线值
boolean	getMatrix(float distance, Matrix matrix, int flags)	获取指定长度的位置坐标及该点Matrix

可以看到，这个就等于是一个Path的一个工具类，方法很简单，那么就开始我们所要做的按钮跟时钟的开发吧

（1）搜索按钮：

首先上图：

要实现这个功能首先要把他分解开来做；

创建搜索按钮的path路径，然后创建外圈旋转的path，

   
  
public void initPath(){  
      mPath_search = new Path();  
      mPath_circle = new Path();  
  
      mMeasure = new PathMeasure();  
  
      // 注意,不要到360度,否则内部会自动优化,测量不能取到需要的数值  
      RectF oval1 = new RectF(-50, -50, 50, 50);          // 放大镜圆环  
      mPath_search.addArc(oval1, 45, 359.9f);  
  
      RectF oval2 = new RectF(-100, -100, 100, 100);      // 外部圆环  
      mPath_circle.addArc(oval2, 45, -359.9f);  
  
      float[] pos = new float[2];  
  
      mMeasure.setPath(mPath_circle, false);               // 放大镜把手的位置  
      mMeasure.getPosTan(0, pos, null);  
  
      mPath_search.lineTo(pos[0], pos[1]);                 // 放大镜把手  
  
      Log.i("TAG", "pos=" + pos[0] + ":" + pos[1]);  
  
  }  

我们要的效果就是点击搜索按钮的时候开始从按钮变为旋转，然后搜索结束以后变为搜索按钮。

所以我们可以确定有四种状态：

[java]view plain copy 
 print?
public   enum  Seach_State{  
    START,END,NONE,SEARCHING  
 }  

然后根据状态来进行动态绘制path，动态绘制path就要使用到PathMeasure测量当前path的坐标，然后进行绘制。

[java]view plain copy 
 print?
private void drawPath(Canvas c) {  
    c.translate(mWidth / 2, mHeight / 2);  
    switch (mState){  
  
        case NONE:  
            c.drawPath(mPath_search,mPaint);  
            break;  
  
        case START:  
            mMeasure.setPath(mPath_search,true);  
            Path path = new Path();  
            mMeasure.getSegment(mMeasure.getLength() * curretnAnimationValue,mMeasure.getLength(),path, true);  
            c.drawPath(path,mPaint);  
            break;  
  
        case SEARCHING:  
            mMeasure.setPath(mPath_circle,true);  
            Path path_search = new Path();  
            mMeasure.getSegment(mMeasure.getLength()*curretnAnimationValue -30,mMeasure.getLength()*curretnAnimationValue,path_search,true);  
            c.drawPath(path_search,mPaint);  
            break;  
  
        case END:  
            mMeasure.setPath(mPath_search,true);  
            Path path_view = new Path();  
  
            mMeasure.getSegment(0,mMeasure.getLength()*curretnAnimationValue,path_view,true);  
            c.drawPath(path_view,mPaint);  
            break;  
    }  
  
}  

然后就是需要通过使用属性动画来返回当前该绘制的百分百，通过这个值来进行计算要绘制的path。

下边是整个代码：

[java]view plain copy 
 print?
package com.duoku.platform.demo.canvaslibrary.attract.view;  
  
import android.animation.Animator;  
import android.animation.ValueAnimator;  
import android.content.Context;  
import android.graphics.Canvas;  
import android.graphics.Color;  
import android.graphics.Paint;  
import android.graphics.Path;  
import android.graphics.PathMeasure;  
import android.graphics.RectF;  
import android.util.AttributeSet;  
import android.util.Log;  
import android.view.View;  
  
/** 
 * Created by chenpengfei_d on 2016/9/7. 
 */  
public class SearchView extends View {  
    private Paint mPaint;  
    private Context mContext;  
    private Path mPath_circle;  
    private Path mPath_search;  
    private PathMeasure mMeasure;  
    private ValueAnimator mValueAnimator_search;  
    private long  defaultduration=3000;  
    private float curretnAnimationValue;  
    private Seach_State mState = Seach_State.SEARCHING;  
    public SearchView(Context context) {  
        super(context);  
        init(context);  
    }  
  
    public SearchView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        init(context);  
    }  
  
    public SearchView(Context context, AttributeSet attrs, int defStyleAttr) {  
        super(context, attrs, defStyleAttr);  
        init(context);  
    }  
  
    public void init(Context context){  
        this.mContext = context;  
        initPaint();  
        initPath();  
        initAnimation();  
  
    }  
    public void initPaint(){  
        mPaint = new Paint();  
        mPaint.setDither(true);  
        mPaint.setStrokeCap(Paint.Cap.ROUND);//设置笔头效果  
        mPaint.setAntiAlias(true);  
        mPaint.setColor(Color.RED);  
        mPaint.setStrokeWidth(3);  
        mPaint.setStyle(Paint.Style.STROKE);  
    }  
  
    public void initPath(){  
        mPath_search = new Path();  
        mPath_circle = new Path();  
  
        mMeasure = new PathMeasure();  
  
        // 注意,不要到360度,否则内部会自动优化,测量不能取到需要的数值  
        RectF oval1 = new RectF(-50, -50, 50, 50);          // 放大镜圆环  
        mPath_search.addArc(oval1, 45, 359.9f);  
  
        RectF oval2 = new RectF(-100, -100, 100, 100);      // 外部圆环  
        mPath_circle.addArc(oval2, 45, -359.9f);  
  
        float[] pos = new float[2];  
  
        mMeasure.setPath(mPath_circle, false);               // 放大镜把手的位置  
        mMeasure.getPosTan(0, pos, null);  
  
        mPath_search.lineTo(pos[0], pos[1]);                 // 放大镜把手  
  
        Log.i("TAG", "pos=" + pos[0] + ":" + pos[1]);  
  
    }  
  
    public void initAnimation(){  
        mValueAnimator_search = ValueAnimator.ofFloat(0f,1.0f).setDuration(defaultduration);  
  
        mValueAnimator_search.addUpdateListener(updateListener);  
  
        mValueAnimator_search.addListener(animationListener);  
    }  
    private ValueAnimator.AnimatorUpdateListener updateListener = new ValueAnimator.AnimatorUpdateListener() {  
        @Override  
        public void onAnimationUpdate(ValueAnimator animation) {  
            curretnAnimationValue = (float) animation.getAnimatedValue();  
            invalidate();  
        }  
    };  
  
    private Animator.AnimatorListener animationListener = new Animator.AnimatorListener() {  
        @Override  
        public void onAnimationStart(Animator animation) {  
  
        }  
  
        @Override  
        public void onAnimationEnd(Animator animation) {  
                if(mState ==Seach_State.START){  
                    setState(Seach_State.SEARCHING);  
                }  
        }  
  
        @Override  
        public void onAnimationCancel(Animator animation) {  
  
        }  
  
        @Override  
        public void onAnimationRepeat(Animator animation) {  
  
        }  
    };  
    @Override  
    protected void onDraw(Canvas canvas) {  
        super.onDraw(canvas);  
  
        drawPath(canvas);  
    }  
    private int mWidth,mHeight;  
    @Override  
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
        super.onSizeChanged(w, h, oldw, oldh);  
        mWidth = w;  
        mHeight = h;  
  
    }  
  
    private void drawPath(Canvas c) {  
        c.translate(mWidth / 2, mHeight / 2);  
        switch (mState){  
  
            case NONE:  
                c.drawPath(mPath_search,mPaint);  
                break;  
  
            case START:  
                mMeasure.setPath(mPath_search,true);  
                Path path = new Path();  
                mMeasure.getSegment(mMeasure.getLength() * curretnAnimationValue,mMeasure.getLength(),path, true);  
                c.drawPath(path,mPaint);  
                break;  
  
            case SEARCHING:  
                mMeasure.setPath(mPath_circle,true);  
                Path path_search = new Path();  
                mMeasure.getSegment(mMeasure.getLength()*curretnAnimationValue -30,mMeasure.getLength()*curretnAnimationValue,path_search,true);  
                c.drawPath(path_search,mPaint);  
                break;  
  
            case END:  
                mMeasure.setPath(mPath_search,true);  
                Path path_view = new Path();  
  
                mMeasure.getSegment(0,mMeasure.getLength()*curretnAnimationValue,path_view,true);  
                c.drawPath(path_view,mPaint);  
                break;  
        }  
  
    }  
  
  
    public void setState(Seach_State state){  
        this.mState = state;  
        startSearch();  
    }  
  
    public void startSearch(){  
        switch (mState){  
            case START:  
                mValueAnimator_search.setRepeatCount(0);  
                break;  
  
            case SEARCHING:  
                mValueAnimator_search.setRepeatCount(ValueAnimator.INFINITE);  
                mValueAnimator_search.setRepeatMode(ValueAnimator.REVERSE);  
                break;  
  
            case END:  
                mValueAnimator_search.setRepeatCount(0);  
                break;  
        }  
        mValueAnimator_search.start();  
    }  
   public   enum  Seach_State{  
       START,END,NONE,SEARCHING  
    }  
}  

（学习的点：path可以组合，可以把不同的path放置到一个path里边，然后进行统一的绘制）

（2）时钟：

效果：

说一下时钟的思路啊，网上很多时钟都是通过Canvas绘制基本图形实现的，没有通过path来实现的，使用path实现是为了以后更加灵活的控制时钟的绘制效果，比如我们要让最外边的圆圈逆时针旋转，还比如在上边添加些小星星啥的，用path的话会更加灵活。

时钟的实现分部分：

1、创建外圈path路径

2、创建刻度path路径，要区分整点，绘制时间点

3、绘制指针，（这个使用的是canvas绘制的线段，也可以使用Path，可以自己测试）

需要计算当前时针，分针，秒针的角度，然后进行绘制

整体代码：

[java]view plain copy 
 print?
package com.duoku.platform.demo.canvaslibrary.attract.view;  
  
import android.content.Context;  
import android.graphics.Canvas;  
import android.graphics.Color;  
import android.graphics.Paint;  
import android.graphics.Path;  
import android.graphics.PathMeasure;  
import android.os.Handler;  
import android.util.AttributeSet;  
import android.view.View;  
  
import java.util.Calendar;  
  
/** 
 * Created by chenpengfei_d on 2016/9/8. 
 */  
public class TimeView extends View {  
    private Paint mPaint,mPaint_time;  
    private Paint mPaint_h,mPaint_m,mPaint_s;  
    private Path mPath_Circle;  
    private Path mPath_Circle_h;  
    private Path mPath_Circle_m;  
    private Path mPath_h,mPath_m,mPath_s;  
    private Path mPath_duration;  
  
    private PathMeasure mMeasure;  
    private PathMeasure mMeasure_h;  
    private PathMeasure mMeasure_m;  
    private Handler mHandler = new Handler();  
    private Runnable clockRunnable;  
    private boolean isRunning;  
    public TimeView(Context context) {  
        super(context);  
        init();  
    }  
  
    public TimeView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        init();  
    }  
  
    public TimeView(Context context, AttributeSet attrs, int defStyleAttr) {  
        super(context, attrs, defStyleAttr);  
        init();  
    }  
    int  t = 3;  
    public void init(){  
        //初始化画笔  
        mPaint = new Paint();  
        mPaint.setDither(true);  
        mPaint.setAntiAlias(true);  
        mPaint.setStyle(Paint.Style.STROKE);  
        mPaint.setStrokeWidth(2);  
        mPaint.setStrokeCap(Paint.Cap.ROUND);  
        mPaint.setStrokeJoin(Paint.Join.ROUND);  
        mPaint.setColor(Color.RED);  
        mPaint_time = new Paint();  
        mPaint_time.setDither(true);  
        mPaint_time.setAntiAlias(true);  
        mPaint_time.setStyle(Paint.Style.STROKE);  
        mPaint_time.setStrokeWidth(2);  
        mPaint_time.setTextSize(15);  
        mPaint_time.setStrokeCap(Paint.Cap.ROUND);  
        mPaint_time.setStrokeJoin(Paint.Join.ROUND);  
        mPaint_time.setColor(Color.RED);  
  
        mPaint_h = new Paint();  
        mPaint_h.setDither(true);  
        mPaint_h.setAntiAlias(true);  
        mPaint_h.setStyle(Paint.Style.STROKE);  
        mPaint_h.setStrokeWidth(6);  
        mPaint_h.setTextSize(15);  
        mPaint_h.setStrokeCap(Paint.Cap.ROUND);  
        mPaint_h.setStrokeJoin(Paint.Join.ROUND);  
        mPaint_h.setColor(Color.RED);  
  
        mPaint_m = new Paint();  
        mPaint_m.setDither(true);  
        mPaint_m.setAntiAlias(true);  
        mPaint_m.setStyle(Paint.Style.STROKE);  
        mPaint_m.setStrokeWidth(4);  
        mPaint_m.setTextSize(15);  
        mPaint_m.setStrokeCap(Paint.Cap.ROUND);  
        mPaint_m.setStrokeJoin(Paint.Join.ROUND);  
        mPaint_m.setColor(Color.RED);  
  
        mPaint_s = new Paint();  
        mPaint_s.setDither(true);  
        mPaint_s.setAntiAlias(true);  
        mPaint_s.setStyle(Paint.Style.STROKE);  
        mPaint_s.setStrokeWidth(2);  
        mPaint_s.setTextSize(15);  
        mPaint_s.setStrokeCap(Paint.Cap.ROUND);  
        mPaint_s.setStrokeJoin(Paint.Join.ROUND);  
        mPaint_s.setColor(Color.RED);  
        //初始化刻度  
        mPath_Circle  = new Path();  
        mPath_Circle.addCircle(0,0,250, Path.Direction.CCW);  
        mPath_Circle_h  = new Path();  
        mPath_Circle_h.addCircle(0,0,220, Path.Direction.CCW);  
        mPath_Circle_m  = new Path();  
        mPath_Circle_m.addCircle(0,0,235, Path.Direction.CCW);  
        //初始化PathMeasure测量path坐标，  
        mMeasure = new PathMeasure();  
        mMeasure.setPath(mPath_Circle,true);  
        mMeasure_h = new PathMeasure();  
        mMeasure_h.setPath(mPath_Circle_h,true);  
        mMeasure_m = new PathMeasure();  
        mMeasure_m.setPath(mPath_Circle_m,true);  
        //获取刻度path  
        mPath_duration = new Path();  
        for (int i = 60; i>0 ;i --){  
            Path path = new Path();  
            float pos [] = new float[2];  
            float tan [] = new float[2];  
            float pos2 [] = new float[2];  
            float tan2 [] = new float[2];  
            float pos3 [] = new float[2];  
            float tan3 [] = new float[2];  
            mMeasure.getPosTan(mMeasure.getLength()*i/60,pos,tan);  
            mMeasure_h.getPosTan(mMeasure_h.getLength()*i/60,pos2,tan2);  
            mMeasure_m.getPosTan(mMeasure_m.getLength()*i/60,pos3,tan3);  
  
            float x = pos[0];  
            float y = pos[1];  
            float x2 = pos2[0];  
            float y2 = pos2[1];  
            float x3 = pos3[0];  
            float y3 = pos3[1];  
            path.moveTo(x , y);  
  
            if(i% 5 ==0){  
                path.lineTo(x2,y2);  
                if(t>12){  
                    t = t-12;  
                }  
                String time = t++ +"";  
                Path path_time = new Path();  
                mMeasure_h.getPosTan(mMeasure_h.getLength()*(i-1)/60,pos2,tan2);  
                mPaint.getTextPath(time,0,time.length(),(x2- (x2/15)),y2-(y2/15),path_time);  
                path.close();  
                path.addPath(path_time);  
            }else{  
                path.lineTo(x3,y3);  
            }  
  
  
            mPath_duration.addPath(path);  
            clockRunnable = new Runnable() {//里面做的事情就是每隔一秒，刷新一次界面  
                @Override  
                public void run() {  
                    //线程中刷新界面  
                    postInvalidate();  
                    mHandler.postDelayed(this, 1000);  
                }  
            };  
        }  
  
        mPath_h = new Path();  
        mPath_h.rLineTo(50,30);  
  
        mPath_m = new Path();  
        mPath_m.rLineTo(80,80);  
  
        mPath_s = new Path();  
        mPath_s.rLineTo(130,50);  
    }  
    private int mWidth,mHeight;  
    @Override  
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
        super.onSizeChanged(w, h, oldw, oldh);  
        mWidth = w;  
        mHeight = h;  
    }  
  
    @Override  
    protected void onDraw(Canvas canvas) {  
        super.onDraw(canvas);  
        if(!isRunning){  
            isRunning = true;  
            mHandler.postDelayed(clockRunnable,1000);  
        }else{  
            canvas.translate(mWidth/2,mHeight/2);  
  
            canvas.drawPath(mPath_Circle,mPaint);  
            canvas.save();  
            canvas.drawPath(mPath_duration,mPaint_time);  
  
            canvas.drawPoint(0,0,mPaint_time);  
  
            drawClockPoint(canvas);  
        }  
  
  
  
  
  
    }  
    private Calendar cal;  
    private int hour;  
    private int min;  
    private int second;  
    private float hourAngle,minAngle,secAngle;  
    /** 
     * 绘制三个指针 
     * @param canvas 
     */  
    private void drawClockPoint(Canvas canvas) {  
        cal = Calendar.getInstance();  
        hour = cal.get(Calendar.HOUR);//Calendar.HOUR获取的是12小时制，Calendar.HOUR_OF_DAY获取的是24小时制  
        min = cal.get(Calendar.MINUTE);  
        second = cal.get(Calendar.SECOND);  
        //计算时分秒指针各自需要偏移的角度  
        hourAngle = (float)hour / 12 * 360 + (float)min / 60 * (360 / 12);//360/12是指每个数字之间的角度  
        minAngle = (float)min / 60 * 360;  
        secAngle = (float)second / 60 * 360;  
        //下面将时、分、秒指针按照各自的偏移角度进行旋转，每次旋转前要先保存canvas的原始状态  
        canvas.save();  
        canvas.rotate(hourAngle,0, 0);  
        canvas.drawLine(0, 0, mWidth/6, getHeight() / 6 - 65, mPaint_h);//时针长度设置为65  
  
        canvas.restore();  
        canvas.save();  
        canvas.rotate(minAngle,0, 0);  
        canvas.drawLine(0, 0, mWidth/6, getHeight() / 6 - 90 , mPaint_m);//分针长度设置为90  
  
        canvas.restore();  
        canvas.save();  
        canvas.rotate(secAngle,0, 0);  
        canvas.drawLine(0, 0, mWidth/6, getHeight() / 6 - 110 , mPaint_s);//秒针长度设置为110  
  
        canvas.restore();  
    }  
}  

这其实还不算特别复杂的动画，也许你有啥好的想法，可以自己通过Path + 属性动画来实现更好看的效果；

比如星空的效果，比如动态绘制文字 + 路径实现类似ppt中播放的一些特效，比如电子书的自动翻页。

（3）下边再介绍一个知识，就是svg：

svg是什么东西呢？

他的学名叫做可缩放矢量图形，是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。

这种格式的图形式可以加载到Android的Path里边。

既然可以加载到Path里边，那么是不是就可以实现更复杂的效果呢，下边看图：（明天再写了）

微信关注我们

原文链接：https://yq.aliyun.com/articles/60230

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

iOS - App 与外设间的通信方式

1、前言一般 iOS 开发者做 App 开发大部分时候都是通过 Http(s) 请求跟后台服务器打交道，做一些信息展示和用户交互。很少涉及到去跟外部硬件设备连接的开发。随着近年来车联网和物联网的兴起，智能家居和智能硬件的逐步火热，越来越多的 App 被开发出来，用来跟硬件设备进行来连接，获取硬件相关信息展示或者发送指令控制硬件来提供服务。本文就针对 iOS 的 App 如何跟外部设备进行连接通信这个问题进行讲解。如下图所示，iOS App 连接外设的常用方式可以分为三大类： 2、通过网络端口通信建立 Socket 使用 TCP/IP 协议族进行通信，天然支持多通道，想要几个通道就建几个 socket 就行了。关于如何使用 Socket 进行 TCP、UDP，推荐 github 上的开源项目 CocoaAsyncSocket。通过网络端口通信主要有三种方式：Wi-Fi 连接、USB 热点共享连接、NCM 连接。 2.1 Wi-Fi 连接优点是：简单，不需要集成 MFi 芯片，只要对应的硬件有无线网卡，然后手机和硬件连接到同一个局域网中就可以使用 socket 通过网络协议通信...

2016-09-08

704

Paint类解析

在自定义组件中，Paint类是一个很重要的类，主要包含颜色、文本、图形样式、位图模式、滤镜等几个方面。Paint类的相关方法如下： 1、颜色是指绘图时使用的颜色，在 Android 中颜色可以指定透明度，使用 16 进制来表示颜色时，格式通常为#AARRGGBB，其中，AA 表示透明度、RR 表示红色、GG 表示绿色、BB 表示蓝色， Color 类定义了颜色信息，内置了常用颜色的 int 型常量，比如 Color.RED 是红色，Color.BLUE 是蓝色……如果您习惯了 16 进制的颜色， Color 类的静态方法 parseColor(String colorString)可以将 16进制颜色转换成 Color 类型。需要注意的是，Android 的颜色都是 int 类型的，Color 类只负责颜色的管理而不是代表某种颜色。 Paint 类中与颜色相关的方法有： public native void setColor(int color);//设置颜色 public native void setAlpha(int a);//设置透明度，a 的范围取 0~255 之间的整数...

2016-09-08

721

发表评论

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。