基于Ext.Panel扩展一个更容易操作的Canvas

/*
    画布类
    xtype:"beidasoft.oe.canvas.panel"
    <script type="text/javascript" language="javascript" src="/modules/oe/view/canvas/panel.js"></script>
    eg:
    var panel = new BeidaSoft.OE.Canvas.Panel()
*/

Ext.namespace("BeidaSoft.OE.Canvas")
BeidaSoft.OE.Canvas.Panel = function (config) {
    BeidaSoft.OE.Canvas.Panel.superclass.constructor.call(this,config);
}
Ext.extend(BeidaSoft.OE.Canvas.Panel, Ext.Panel, {
    width: 500,
    height: 500,
    border: false,
    canvas: '',
    canvasID: "canvas_",
    initComponent: function () {
 this.canvasID = this.canvasID + this.id
        BeidaSoft.OE.Canvas.Panel.superclass.initComponent.call(this);
    },

 //清理画布
    Clear:function(){
 var ctx = this.canvas.getContext("2d");
        ctx.clearRect(0, 0, this.getWidth(), this.getHeight());
    },

 //获取画布上下文
    GetContext:function(){
 var ctx = this.canvas.getContext("2d");
 return ctx
    },

 //自带画图示例
    Draw:function(){
 var cxt = this.GetContext()
 //创建渐变
 var radgrad = cxt.createRadialGradient(50, 50, 10, 60, 60, 60);
        radgrad.addColorStop(0, '#A7D30C');
        radgrad.addColorStop(0.9, '#019F62');
        radgrad.addColorStop(1, 'rgba(1,159,98,0)');
        cxt.fillStyle = radgrad;
        cxt.fillRect(0, 0, this.getWidth(), this.getHeight());

        cxt.font = "italic 20px 微软雅黑";
        cxt.strokeText("李树强", 30, 50);
    },

 //渲染实现Canvas标签的实例化以及canvas元素的引用
    onRender: function(ct, position) {
        BeidaSoft.OE.Canvas.Panel.superclass.onRender.apply(this, arguments);
 var canvasHTMLFormat = [
            '<canvas id="{0}" height="100%" width="100%" style="border: 0px solid #06c;">',
                '您使用的浏览器不支持Canvas标签和CanvasAPI,建议使用IE9以上版本',
            '</canvas>'
        ].join("")
 var canvasHTML = String.format(canvasHTMLFormat, this.canvasID);
 this.body.dom.innerHTML += canvasHTML;
 var canvas = document.getElementById(this.canvasID)
 this.canvas = canvas
    }
});
Ext.reg('beidasoft.oe.canvas.panel', BeidaSoft.OE.Canvas.Panel)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

AutoFlowLayout-多功能流式布局与网格布局控件

近期工作需要用到流式布局,网上也有很多关于这方面的资料。发现流式布局与网格布局的自定义很有意思,是学习自定义控件的一个很好的方式,所以就撸了个几百行代码的控件,...

36910
来自专栏androidBlog

Android打造不一样的新手引导页面(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

651
来自专栏Android干货园

Android 自定义上面圆角下面直角的ImageView

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/48...

5014
来自专栏Android源码框架分析

RecyclerView定制:通用ItemDecoration及全展开RecyclerView的实现不同场景RecyclerView实现

4854
来自专栏向治洪

Android仿拼多多拼团堆叠头像

序言 做电商的都知道,作为商品的一种售卖方式,拼团是是提供商品售卖的一种及时有效的方式,而在拼团市场中,拼多多无疑是做的最好的一家。于是,研究拼多多的售卖方式之...

2296
来自专栏向治洪

Android仿拼多多拼团堆叠头像

序言 做电商的都知道,作为商品的一种售卖方式,拼团是是提供商品售卖的一种及时有效的方式,而在拼团市场中,拼多多无疑是做的最好的一家。于是,研究拼多多的售卖方式之...

5468
来自专栏向治洪

仿大众点评悬浮购买框效果

我之前写了一篇关于美团网,大众点评的购买框效果的文章Android对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果,我自己感觉效果并不是很好,如...

31210
来自专栏学海无涯

Android开发之Scroller

什么是Scroller? 翻译为弹性滑动对象,可以实现View的弹性滑动动画,与Scroller相关的就是大家比较熟悉的scrollTo和scrollBy方法,...

3775
来自专栏向治洪

PullToRefreshScrollView 嵌套RecyclerView实现特卖列表倒计时抢购

不久之前,我们谈到了通过Handler与timer及TimerTask结合实现倒计时抢购列表,那个是PullToRefreshListView实现的,今天要讲的...

3265
来自专栏向治洪

CoordinatorLayout

CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能:  1、作为顶层布局  2、调度协调子布局 ...

16810

扫码关注云+社区

领取腾讯云代金券