`
hw_alex
  • 浏览: 87970 次
社区版块
存档分类
最新评论

用 ZK Canvas 组件画图

    博客分类:
  • ZK
阅读更多

ZK Canvas组件可以创建一个画图区域并且允许动态的产生图片和位图。它提供了更多的功能来画线,矩形,园和图片文件,Zk程序开发者现在通过这个组件只用一点java代码就能创建一个画画区域。比如:

<?xml version="1.0" encoding="utf-8"?>

<window id="w" title="Canvas Demo" style="width:480px" border="normal">
    <canvas id="mycanvas" width="450px" height="300px"/>    
    
    <button label="画矩形">
        <attribute name="onClick">
            <![CDATA[
                //Set filled-in color
                mycanvas.fillStyleRGBA(0, 0, 200, 1);
                //画矩形1
                mycanvas.fillRect(110,100,60,50);
                
                //Set another filled-in color
                mycanvas.fillStyleRGBA(210, 0, 0, 0.5);
                //画矩形2
                mycanvas.fillRect(130, 130, 60, 50);
            ]]>                    
        </attribute>
    </button>
    
    <button label="Clear">
        <attribute name = "onClick">
            //清除canvas内容
            mycanvas.clear();
        </attribute>
    </button>
</window>

 

 

ZK官网提供了一个完整的demo,http://downloads.sourceforge.net/zkforge/canvas_demo.war

 

效果图:

 

分享到:
评论
1 楼 whq 2009-09-10  
大侠 你好。我想请教一个问题  zk的Canvas组件和Context Menu 组件能结合到一块使用么?
我想做出一个画图软件,点击右键出现一个菜单,然后选择画出点的类型。选择后 画出点。然后连接刚画出的点和 上一次画出的点

相关推荐

    封装canvas各种方法的vue组件

    接着,`矩形`绘制是Canvas的基本操作,可以使用`rect()`方法创建矩形,然后用`fillRect()`或`strokeRect()`来填充或描边。开发者可能还实现了更复杂的功能,比如圆角矩形,这需要结合`arcTo()`来创建曲线边缘。 ...

    使用Canvas进行鼠标画图和线程画线

    总结来说,使用Canvas进行鼠标画图和线程画线涉及的主要知识点有:Canvas元素的创建与获取、2D渲染上下文、事件监听、路径绘制(`beginPath`、`moveTo`、`lineTo`、`stroke`)、线条属性(颜色、宽度)的设置,以及...

    canvas生成画图签名PC移动全兼容版

    "canvas生成画图签名PC移动全兼容版"是一个基于JavaScript和canvas技术实现的电子签名解决方案,它能够适应个人电脑(PC)和移动设备。下面将详细探讨这个项目所涉及的技术和知识点。 1. **Canvas API**: - ...

    canvas 画图板.zip

    下面我们将深入探讨 Canvas API 以及如何使用这些资源来实现一个画图板。 首先,`index.html` 是网页的主文件,它定义了页面的基本结构。在这个项目中,`index.html` 应该包含一个 `&lt;canvas&gt;` 元素,它是整个画图板...

    canvas画图

    html5 canvas 画图练习

    开源的HTML5 Canvas画图插件 - Literally Canvas

    为此,Literally Canvas提供了React组件版本,使得与这些现代前端框架的集成变得更加顺畅。 总的来说,Literally Canvas作为一个开源的HTML5 Canvas画图插件,不仅提供了丰富的绘图功能,而且具有良好的可扩展性和...

    Android下使用Canvas画图

    本文将深入探讨Android中Canvas画图的相关知识点,帮助你理解和掌握其核心功能。 1. **Canvas的基本概念** - Canvas是Android系统提供的一个类,它提供了在二维画布上进行绘制的方法。 - 通常,我们会在一个...

    基于HTMLCanvas的画图板设计和实现.doc

    本文详细介绍了实现过程中的关键技术和思路,并讨论了Canvas元素在画图板设计和实现中的应用和优点。 CSS3技术应用: 在画图板的设计和实现过程中,本文还讨论了CSS3技术的应用,包括选择器、样式和动画等功能。CSS...

    canvas定义画图板

    本教程将深入探讨`canvas`元素的定义和使用,以及如何通过JavaScript来操作它,创建一个基本的画图板。 一、canvas元素的定义 `&lt;canvas&gt;`元素是HTML5引入的新特性,它是一个内联块级元素,主要用于在网页上绘制图形...

    html5 Canvas 画图板

    html5 Canvas 画图板,学习使用html5 Canvas ,让你画画更轻松

    canvas基本画图功能

    canvas,canvas UI,canvas画图功能

    vue+canvas绘制图形

    在这个项目中,我们可以创建一个名为`Canvas.vue`的Vue组件,专门负责处理Canvas元素。在`Canvas.vue`内部,我们将定义`&lt;canvas&gt;`标签,并通过JavaScript来操作其上下文(`canvas.getContext('2d')`),实现图形的...

    vue ---- 基于canvas的绘制海报组件

    在这个“vue ---- 基于canvas的绘制海报组件”的项目中,开发者利用 Vue 2.0 版本创建了一个专用于在网页上绘制H5海报的组件。这个组件充分利用了HTML5的Canvas元素,提供了一种灵活的方式来动态生成和定制海报。 ...

    Android上canvas自定义画图案例

    本案例"DrawDialDemo"将深入讲解如何利用Canvas进行自定义画图,通过注释来帮助开发者理解每一步操作。 首先,Canvas是Android图形系统的一部分,它提供了在Bitmap或Surface上绘制各种形状、文本和图像的方法。要...

    在线画图canvas

    一旦有了2D渲染上下文,我们就可以使用一系列的绘图方法来绘制线条、形状、文本和图像。例如,`beginPath()`开始一条路径,`moveTo()`移动到指定点,`lineTo()`画线到另一个点,`stroke()`则会绘制当前路径: ```...

    微信小程序使用canvas的画图操作示例

    本文实例讲述了微信小程序使用canvas的画图操作。分享给大家供大家参考,具体如下: 基础写起来太没动力了,也写得乱七八糟的,还是直接解决一些小问题比较方便,代码的方方面面的细节都会详尽的解释一下。 1、下面...

    轻量级在线表格(canvas ) 组件.zip

    《轻量级在线表格(canvas)组件:探索开源JavaScript实现》 在当今互联网技术日新月异的时代,轻量级的在线表格组件已经成为许多Web应用不可或缺的一部分。它们为用户提供便捷的数据输入、编辑和分析功能,而无需...

    可定义笔刷和画布的HTML5 Canvas画板画图工具

    HTML5 Canvas是一个强大的Web图形接口,它允许开发者在网页上绘制矢量图形和位图图像。这个"可定义笔刷和画布的...同时,由于Canvas的灵活性,这样的画图工具也可以应用到在线教育、协作绘图、设计工具等多个领域。

    基于HTML5 Canvas和jQuery 的画图工具的实现

    HTML5 Canvas和jQuery是现代网页开发中的两个重要技术,它们结合使用可以创建出功能丰富的交互式画图工具。Canvas作为HTML5的一个核心特性,提供了一种在浏览器中绘制图形的方法,而jQuery则是一个广泛使用的...

Global site tag (gtag.js) - Google Analytics