`
webcode
  • 浏览: 5945061 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

自定义Background

 
阅读更多

TWaver提供了ImageBackground来为TNetwork设置背景,ImageBackground可以设置为颜色,渐变色,图片或纹理,但是如果想设置多张图片为背景,或者需要准确的定位背景(比如居中),ImageBackground就无能为力了,下面看我的解决方案:

既然ImageBackground无法满足需求了,我们就自己写一个,得益于TWaver优秀的设计,我们可以很容易地扩展原有的类,然后加上自己的功能。通过查看API得知,ImageBackground继承自AbstractBackground,我们干脆抛弃ImageBackground,自己从AbstractBackground继承。考虑到有可能需要多张图片组合成一个背景,我们引入Layer的概念,在我们自定义的Background维护一个集合,存储Layer的信息,绘制背景的时候从集合中取出Layer统一渲染。自定义Background类的结构应该是下面这样的:

public class GeneralBackGround extends AbstractBackground{
    private java.util.List backGroundModel=new ArrayList();
    @Override
    public void paintContent(Graphics2D g2d, double zoom, Rectangle viewportRect) {
        Iterator it=backGroundModel.iterator();
        while(it.hasNext()){
            GeneralBackGroundLayer gbgd= (GeneralBackGroundLayer) it.next();
            //利用g2d进行绘制,具体代码请看附件
        }
    }
    /**
     * 添加Layer
     * @param layer
     */
    public void addLayer(GeneralBackGroundLayer layer){
        this.backGroundModel.add(layer);
    }
    @Override
    public Dimension getBackgroundSize() {
        return null;
    }
    @Override
    public SVGStruct toSVG(SVGContext svgContext) {
		return new SVGStruct("", null);
    }
    public List getBackGroundModel() {
        return backGroundModel;
    }
    public void setBackGroundModel(List backGroundModel) {
        this.backGroundModel = backGroundModel;
    }
}

Layer更简单,因为渲染工作是GeneralBackGround来做,所以Layer只需要存储一些背景属性,比如:位置,类型(颜色,渐变,图片,纹理),透明度等,我定义的Layer结构如下:

public class GeneralBackGroundLayer {
    private int direction=DIRECTION_TOP_LEFT;//位置,默认左上角
    private int type;//类型,颜色,渐变,图片或纹理
    private boolean full=false;//是否填充整个背景
    private Dimension size;//指定大小
    private Color color;//背景色
    private Color gradientColor;//渐变背景色
    private int gradientFactory;//渐变样式,属性为TWaverConst.GRADIENT_XXX
    private int offsetX=0;//X偏移
    private int offsetY=0;//Y偏移
    private SerializableTexturePaint texturePaint;//纹理背景
    private SerializableImage image;//背景图片
    private String name;//层的名字
    //不会序列化的图片和纹理背景
    private Image unserializableImage;
    private TexturePaint unserializableTexturePaint;
    private float alpha=1f;//透明度

    //getter,setter
}

如果你觉得这些属性不够用,完全可以加入自定义属性(比如旋转角度),然后在GeneralBackGround#paintContent中处理一下就可以了。

接下来要考虑XML存储的问题,TWaver使用java.beans.XMLEncoder将java bean转换成XML,具体的用法可以查看API。需要指出的是,BufferedImage和TexturePaint无法直接转换,因为它们没有公共的无参构造,为了将它们存储进XML,我们需要做一点额外的处理:BufferedImage转换成Base64的一个字符串存储,TexturePaint可以拆成一个BufferedImage和一个Rectangle存储,我的实现类分别是:SerializableImage和SerializableTexturePaint,源码在附件中,大家可以参考。

最后附上一张Demo截图

注意,除了两个Node和一个Link,其它的都是Background哦!附件下载请见原文最下方

分享到:
评论

相关推荐

    android自定义百分比布局

    2、使用自定义布局 //线型布局 android:layout_width="match_parent" android:layout_height="200dip" android:background="@color/backColor"> //相对布局 android:layout_width="match_parent" ...

    ratingbar 自定义星星效果

    ratingbar 自定义星星效果 <item android:id="@+android:id/background" android:drawable="@drawable/xixi0" /> android:drawable="@drawable/xixi0" /> android:drawable="@drawable/xixi1" /> ...

    android自定义弹出框

    <?xml version="1.0" encoding="UTF-8"?> android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" > android:layout_width=...android自定义弹出框,很实用的

    微信小程序button组件自定义样式

    background-color属性是修改背景颜色的,color是修改字体颜色的,这里注意:如果组件里面写 type='....',修改背景颜色会无效,例如以下代码:   <!--修改背景颜色无效--> <button class='btn' bindtap='...

    FireZenk-s-ProgressBar-高度自定义的ProgressBar.zip

    高度自定义的、支持多种模式的ProgressBar。项目地址:https://github.com/FireZenk/FireZenk-s-ProgressBar 效果图:如何使用:在xml布局文件中创建   android:id="@ id/myProgressBar"  android:layout_width...

    select自定义样式

    select自定义样式,div+css模拟select下拉框效果,html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <...

    C#自定义控件背景色透明的方法

    解决自定义控件不透明的方法。I struggled for ages with the problem of having controls show through a control that was painted on top of them. It seems that ControlStyles.SupportsTransparentBackColor ...

    微信小程序-自定义组件开发微信小程序的框架

    W2X框架致力于以"自定义组件"的方式快速开发微信小程序,这些自定义组件以组件库的形式进行组织。 一个使用W2X组件库的页面代码举例如下: > W2X提供了wx.html文件格式把cssdomjs聚合在一个文件中 .abc { ...

    uniapp 使用map组件 动态自定义图标及文字

    <free-scroll-main :scrollView='false' :showTabber="false" scrollViewStyle="background-color: #fafaf9;"> </free-scroll-main> --> ; width: 750rpx;"> ; width: 750rpx;" :latitude="latitude" :...

    导出Excel到自定义位置

    background-color:#8ECBE8; }.table td{text-align:center;height:21px;background-color:#EFF6FF;}.table th{ font: 9pt Tahoma, Verdana; color: #000000; font-weight: bold; background-color: #8ECBEA; height...

    android_颜色宝典

    android开发background自定义颜色代码,

    grid-background:生成自定义CSS网格背景

    生成自定义CSS网格背景

    html5自定义video标签的海报与播放按钮功能

    2.设置自定义封面图 以上这两点都想自定义 二、思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三、步骤分解 1.海报图片作为div的背景 注:无论是横图还是竖图,都希望按原比例显示在div内 css: ...

    android集成文字输入,语音输入,表情输入自定义view

    android:background "#aaa" > 第三步:怎么用该控件实现发送文字表情和语音 首先 在activity中获得该SendMassageRelativeLayout 并设置两个参数 第一个是语音的录音要放的文件夹路径(文件夹要在...

    osm-background-tiles:用于编辑 OpenStreetMap 的自定义背景图块集合

    用于编辑 OpenStreetMap 的自定义背景图块集合 北美 美国 科罗拉多州 阿拉帕霍县 4 英寸分辨率航空摄影 - 缩放级别:18 - 21 ...

    android圆形头像自定义view

    android圆形头像自定义view,在布局文件中设置background或src即可

    Android代码-有趣的添加产品自定义View

    IncrementProductView Description Interesting concept of products incrementation inspired this ...* app:ipv_highlight_background_color - background color when view is expand * app:ipv_default_backgrou

    Android自定义控件之自定义组合控件(三)

    前两篇介绍了自定义控件的基础原理Android自定义控件基本原理详解(一)、Android自定义控件之自定义属性(二)。今天重点介绍一下如何通过自定义组合控件来提高布局的复用,降低开发成本,以及维护成本。 使用...

    Android代码-自定义的 CollapsibleToolbar 和折叠的文本

    BACKGROUND : CollapsibleToolbarHelper : Although the new design support library allows us to do some cool stuff, the available sample code does not cover the potential that it has been built for. ...

    自定义ListView背景

    NULL 博文链接:https://lyndon-lin.iteye.com/blog/1703415

Global site tag (gtag.js) - Google Analytics