【问题标题】:create percentage square in java instead circles在java中创建百分比平方而不是圆圈
【发布时间】:2018-08-19 12:43:23
【问题描述】:

我正在为 amazfit 表盘设计一个现有项目。代码基于java。问题是:在原始项目中,为了显示电池、步数和运动百分比,显示三个圆圈。我的想法是画一个矩形(或一条线)而不是原来的圆。问题是我是 java 的新编程,如果没有 FC 应用程序,我不知道如何改变它。

这款手表有两个屏幕:一个处于活动状态,另一个处于待机模式(仅限 8 色)

活动模式绘制圆形,待机模式使用 png 图像。

这是代码(用于圆圈):

package es.xxxx.xxxx.widget;


    private final float startAngleBattery = 30;
    private final float arcSizeBattery = 360 - startAngleBattery - startAngleBattery;

  
    @Override
    public void init(Service service) {
        this.thickness = (int) service.getResources().getDimension(R.dimen.xxxx_circles_thickness);

      
        this.textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        this.textPaint.setTypeface(ResourceManager.getTypeFace(service.getResources(), ResourceManager.Font.BEBAS_NEUE));
        this.textPaint.setTextSize(service.getResources().getDimension(R.dimen.xxxx_circles_font_size));
        this.textPaint.setColor(service.getResources().getColor(R.color.xxxx_time_colour));
        this.textPaint.setTextAlign(Paint.Align.CENTER);

        this.ring = new Paint(Paint.ANTI_ALIAS_FLAG);
        this.ring.setStrokeCap(Paint.Cap.ROUND);
        this.ring.setStyle(Paint.Style.STROKE);
        this.ring.setStrokeWidth(this.thickness);

        this.circle = new Paint(Paint.ANTI_ALIAS_FLAG);
        this.circle.setColor(Color.BLACK);
        this.circle.setStrokeWidth(1f);
        this.circle.setStyle(Paint.Style.STROKE);

        

    @Override
    public void draw(Canvas canvas, float width, float height, float centerX, float centerY) {
        int count = canvas.save();

        int radius = Math.round(Math.min(width / 2, height / 2)) - this.thickness;

        RectF oval = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);

        // rotate from 0 to 270 degrees
        canvas.rotate(90, centerX, centerY);

        this.ring.setColor(this.backgroundColour);
        canvas.drawArc(oval, startAngleBattery, arcSizeBattery, false, ring);
        if (batterySweepAngle != null) {
            float px = getPointX(oval, centerX, startAngleBattery, batterySweepAngle);
            float py = getPointY(oval, centerY, startAngleBattery, batterySweepAngle);
            this.ring.setColor(this.batteryColour);
            canvas.drawArc(oval, startAngleBattery, batterySweepAngle, false, ring);
            canvas.drawCircle(px, py, this.thickness / 3f, circle);
            canvas.drawCircle(px, py, this.thickness / 6f, circle);
        }

      

        canvas.restoreToCount(count);

        
        if (this.batteryData != null) {
            String text = String.format("%02d", this.batteryData.getLevel() * 100 / this.batteryData.getScale());
            canvas.drawText(text, batteryTextLeft, batteryTextTop, textPaint);
        }

        

    }

    @Override
    public void onDataUpdate(DataType type, Object value) {
        switch (type) {
           
            case BATTERY:
                onBatteryData((Battery) value);
                break;
           }
    }

    @Override
    public List<DataType> getDataTypes() {
        return Arrays.asList(DataType.BATTERY);  

        private void onBatteryData(Battery battery) {
        this.batteryData = battery;
        if (batteryData == null) {
            this.batterySweepAngle = 0f;
        } else {
            float scale = batteryData.getLevel() / (float) batteryData.getScale();
            this.batterySweepAngle = Math.min(arcSizeBattery, arcSizeBattery * scale);
        }
    }

   private RectF nextOval(RectF oval) {
        oval.left = oval.left + this.thickness + MARGIN;
        oval.top = oval.top + this.thickness + MARGIN;
        oval.right = oval.right - this.thickness - MARGIN;
        oval.bottom = oval.bottom - this.thickness - MARGIN;
        return oval;
    }

    private float getPointX(RectF oval, float cx, float startAngle, float sweepAngle) {
        float width = oval.right - oval.left;
        return (float) (cx + (width / 2D) * Math.cos((sweepAngle + startAngle) * Math.PI / 180));
    }

    private float getPointY(RectF oval, float cy, float startAngle, float sweepAngle) {
        float height = oval.bottom - oval.top;
        return (float) (cy + (height / 2D) * Math.sin((sweepAngle + startAngle) * Math.PI / 180));
    }

    @Override
    public List<SlptViewComponent> buildSlptViewComponent(Service service) {
        Typeface timeTypeFace = ResourceManager.getTypeFace(service.getResources(), ResourceManager.Font.BEBAS_NEUE);

        SlptLinearLayout power = new SlptLinearLayout();
        power.alignX = 2;
        power.alignY = 2;
        power.add(new SlptPowerNumView());
        power.setTextAttrForAll(
                service.getResources().getDimension(R.dimen.xxxx_circles_font_size_slpt),
                -1,
                timeTypeFace
        );
        power.setStart(
                (int) service.getResources().getDimension(R.dimen.xxxx_battery_text_left_slpt),
                (int) service.getResources().getDimension(R.dimen.xxxx_battery_text_top_slpt));
        SlptPowerArcAnglePicView powerArcView = new SlptPowerArcAnglePicView();
        powerArcView.setImagePicture(Util.assetToBytes(service, "battery_splt.png"));
        powerArcView.start_angle = (int) startAngleBattery + 180 - 3;
        powerArcView.full_angle = (int) arcSizeBattery + 6;

       

        return Arrays.asList(power, powerArcView);
    }
}

提前致谢。

【问题讨论】:

  • 代码太多了,你需要把它分解成更简单的格式
  • 谢谢@chinloyal,我只为我的问题简化代码。
  • 编辑您的 ondraw 方法以绘制矩形而不是弧形或椭圆形或圆形。
  • 问题是它,我没有找到 Draw.Rect 的任何示例,并使用 png 图像。第二个问题是这个百分比只使用了一半的屏幕。

标签: java android percentage


【解决方案1】:

对于仍在搜索的任何人...

您可以在屏幕打开时不断循环运行的“绘制”函数中绘制矩形,但是,屏幕关闭(SLPT模式)使用inggenic的库来绘制(函数buildSlptViewComponent),这是真正的问题。

我不想详细介绍,因为它会是页面,所以看看GreatFit project

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-01-25
    • 1970-01-01
    • 1970-01-01
    • 2017-02-26
    • 1970-01-01
    • 2016-04-25
    相关资源
    最近更新 更多