`

自定义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哦!<a href=' http://twaver.servasoft.com/?p=4832'>附件下载请见原文最下方</a>

 

分享到:
评论

相关推荐

    c#自定义漂亮按钮

    创建完自定义控件后,可以在Form设计器中像使用普通按钮一样拖放`CustomButton`,然后在代码中设置`BackgroundImage`和`BackgroundImageLayout`属性,以实现预期效果。 7. **进一步拓展**: 除了背景图片,我们还...

    高仿qqListview滑动效果

    这些可以通过设置状态选择器(StateListDrawable)或者自定义Background实现。 6. 性能优化:在处理大量数据时,确保性能至关重要。除了ViewHolder模式,还可以通过使用DiffUtil来减少不必要的视图更新,提高滚动时...

    Android 自定义气泡布局

    在布局的XML文件中,可以使用`android:background`属性设置填充颜色;在代码中,可以通过`setBackgroundColor()`方法动态更改颜色。 6. **实现步骤**: - 创建一个新的`View`类,继承自`View`或`FrameLayout`。 -...

    Android自定义toolbar布局

    本教程将详细介绍如何在Android项目中自定义`Toolbar`布局。 首先,我们从`Toolbar`的基本概念开始。`Toolbar`是`android.support.v7.widget.Toolbar`类的一个实例,它是Android Support Library的一部分。它的引入...

    android 自定义控件 自定义属性详细介绍

    &lt;attr name="background" format="reference" /&gt; ``` 2. **color**: 定义颜色值,可以是预定义的颜色或者RGB十六进制值。例如: ```xml ``` 3. **boolean**: 表示布尔值,通常用于控制某个特性是否开启。...

    Qt 自定义导航栏

    在Qt开发中,自定义导航栏是一项常见的任务,它能够为应用程序提供更加直观且具有特色的用户界面。本文将深入探讨如何在Qt中实现自定义导航栏,并分享一个使用案例,帮助开发者创建美观、易用的树形导航结构。 首先...

    Android 自定义TimePicker组件

    set_background_color(0x00000000); // 其他自定义设置... } @Override protected void onDraw(Canvas canvas) { // 自定义绘制逻辑 } // 其他自定义方法... } ``` 在项目中使用这个自定义组件时,只需在...

    C#自定义控件之-winform美化

    3. 图片背景:为窗体设置背景图片,可以使用Form的BackgroundImage属性。同时,可以通过调整BackgroundImageLayout属性来控制图片的显示方式,如拉伸、平铺等。 4. 控件样式:通过修改控件的外观属性,如ForeColor...

    C#自定义窗体--自定义窗体

    - **背景图像**:`BackgroundImage`属性使用了来自`CustomControl.Properties.Resources`命名空间的一个资源,即`test01`图像。 - **字体样式**:`Font`属性设置了一个自定义的字体样式,包括粗体、斜体和下划线效果...

    TabHost自定义样式 自定义TabWidget

    例如,可以设置`android:background`来更改背景色,`android:textColor`来修改文字颜色。 - 使用`TabSpec`来创建选项卡,并通过`setIndicator()`方法设置自定义的视图,如ImageView和TextView组合,以实现更复杂的...

    android自定义时长Toast

    android:background="@drawable/toast_background" android:orientation="vertical" android:padding="8dp"&gt; android:id="@+id/text_view_toast" android:layout_width="wrap_content" android:layout_...

    android 自定义单选按钮radioButton

    &lt;item name="android:background"&gt;@drawable/custom_button_background &lt;item name="android:textColor"&gt;#000000 ... ``` 然后在布局文件中应用这个样式: ```xml ... style="@style/CustomRadioButtonStyle...

    Android自定义Spinner样式

    - 背景资源:可以使用`android:background`属性设置自定义背景图,或者通过XML定义形状(如矩形、圆角矩形等)来改变Spinner的外观。 - 使用`&lt;shape&gt;`标签定义一个Drawable,设置颜色、边框宽度和边框颜色,以创建...

    自定义 actionbar 和 修改actionbar 样式

    对于Android 3.0以下版本,原生的ActionBar功能相对较弱,但开发者可以通过自定义来实现更多功能。本主题将详细探讨如何自定义ActionBar以及修改其样式。 首先,我们来看自定义ActionBar的知识点。在API 3.0以下...

    Android自定义控件:可重用的自定义Dialog类

    android:background="@drawable/dialog_background"&gt; android:id="@+id/tvDialogTitle" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="20sp" android:...

    小程序自定义tabbar

    在微信小程序中,开发者有时需要根据自己的应用设计和交互需求,对系统默认的tabbar进行自定义,以提供更个性化的用户体验。标题“小程序自定义tabbar”所指的就是这个过程,即通过编写HTML和JavaScript代码,来创建...

    Android Tablayout 自定义Tab布局的使用案例

    android:background="@drawable/selector_icon_choose_txt_bg" android:padding="@dimen/commom_margin_4" android:textSize="@dimen/commom_tv_size_12" android:textStyle="bold" /&gt; ``` 在这个布局文件中,...

    自定义的 Action Bar

    android:background="?attr/colorPrimary" android:elevation="4dp" android:theme="@style/ThemeOverlay.AppCompat.ActionBar" /&gt; ``` 在活动中,设置Toolbar为Action Bar: ```java Toolbar toolbar = ...

    html+css背景自定义

    background-image: url('images/background.jpg'); /* 设置背景图像 */ background-repeat: no-repeat; /* 防止图像平铺 */ background-position: center; /* 将图像居中 */ background-size: cover; /* 使图像...

Global site tag (gtag.js) - Google Analytics