开发者社区> 问答> 正文

有有画线的功能吗?类似Android里面的path

想实现一个水波纹效果动图,开发文档看了看好像没有画线的功能

展开
收起
fanzy1234 2019-02-22 09:55:40 1876 0
3 条回答
写回答
取消 提交回答
  • Re有有画线的功能吗?类似Android里面的path
    好嘞,谢啦

    -------------------------

    回 1楼游客qjw5fhbmwnv6q的帖子
    参考您给的连接以及开发文档里面的view自绘画出来了。
    "use strict";
    const LogicView = require("lego/framework/ui/LogicView");
    const RelativeLayout = require("yunos/ui/layout/RelativeLayout");
    const TapRecognizer = require("yunos/ui/gesture/TapRecognizer");
    const sysprop = require("sysprop/sysprop");
    const AlertPopup = require("lego/control/AlertPopup");
    const TAG = "First::";
    const CompositeView = require("yunos/ui/view/CompositeView");
    const TextView = require("yunos/ui/view/TextView");
    const ImageView = require("yunos/ui/view/ImageView");
    const Resource = require("yunos/content/resource/Resource");
    const PropertyAnimation = require("yunos/ui/animation/PropertyAnimation");

    const View = require("yunos/ui/view/View");
    const Context = require("yunos/graphics/Context");
    // const WebGLView = require("yunos/ui/view/WebGLView");
    const Image = require("yunos/multimedia/Image");
    const R_360 = 2 * Math.PI;
    class MyCanvasView extends View {
        onDraw(context) {
            context.beginPath();
            context.fillStyle = "#FFB144";
            context.moveTo(2400, 600);
            context.lineTo(0, 600);
            context.lineTo(0, 200);
            context.bezierCurveTo(300, 0, 700, 500, 1280, 200);
            context.bezierCurveTo(1580, 0, 1980, 500, 2560, 200);
            context.lineTo(2560, 600);
            context.closePath();
            context.fill();
        }
    }

    class Wave extends LogicView {
        constructor(options) {
            super(options);
            this._init();
            Logger.D("nnv3",options.info);
        }

        _init() {
            log(TAG, "_init");
            // require("../../rule/FlameoutRuleHandler").getInstance();
        }

        bindModel() {
            Logger.D(TAG, "bindModel");
        }
        onCreate() {
            let c1=this.rootView.findViewById("indexTabViewContainer")

            let view = new MyCanvasView();
            view.left = -1280;
            view.top = 0;
            view.width = 2560;
            view.height = 600;
            // view.background = "black";
            // view.borderColor = "blue";
            // view.borderWidth = 10;
            // view.borderRadius = 20;
            this.animation = new PropertyAnimation(view);
            this.animation.from = {translationX: 0, opacity: 0.7};
            this.animation.to = {translationX: 1280, opacity: 0.7};
            this.animation.duration = 3000;
            this.animation.iterationCount = "infinite";
            // this.animation.timingFunction = "cubic-bezier(0.42, 0, 0.58, 1.0)";
            this.animation.start();

            let view2 = new MyCanvasView();
            view2.left = -1280;
            view2.top = 0;
            view2.width = 2560;
            view2.height = 600;

            this.animation2 = new PropertyAnimation(view2);
            this.animation2.from = {translationX: 0, opacity: 0.4};
            this.animation2.to = {translationX: 1280, opacity: 0.4};
            this.animation2.duration = 4000;
            this.animation2.iterationCount = "infinite";
            // this.animation.timingFunction = "cubic-bezier(0.42, 0, 0.58, 1.0)";
            this.animation2.start();

            c1.addChild(view);
            c1.addChild(view2);


        }

        onShow(data) {
            Logger.D("abc", data);
        }
        onHide(data) {
            Logger.D(TAG, "onHide", data);
        }
        destroy(){
            Logger.D(TAG, "destroy method called");
            super.destroy();
        }
    }


    module.exports = Wave;
    2019-02-25 08:29:29
    赞同 展开评论 打赏
  • 请查看关于yunos.graphics.Context中有关于Canvas 2D API的介绍: https://developer.alios.cn/#/%2Fdevelop%2FReference%2Fauto%2Fgraphics%2Fyunos.graphics.Context?docversion=3
    2019-02-22 13:43:44
    赞同 展开评论 打赏
  • 回 楼主fanzy1234的帖子
    可以使用CAF 框架提供的Canvas2D API 绘制矢量图形
    2019-02-22 13:29:03
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
58同城Android客户端Walle框架演进与实践之路 立即下载
Android组件化实现 立即下载
蚂蚁聚宝Android秒级编译——Freeline 立即下载