[聚合文章] 基于 HTML5 Canvas 的简易 2D 3D 编辑器

  1. 首页
  2. 聚合文章
  3. 文章详情
HTML5 2017-12-03 22 阅读
原文链接: http://www.cnblogs.com/xhload3d/p/7955923.html

不管在任何领域，只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的，今天我们不需要 3dMaxs 等设计软件，直接用 HT 就能自己写出一个 2D 3D 编辑器，实现这个功能我觉得成就感还是爆棚的，哈哈！只要你会想，能做，就能根据这个编辑器延展成 big thing！

本例地址：http://www.hightopo.com/demo/drag-create-data/ 

下面是实现效果图：

我们首先将所有需要用到的 json 文件作为矢量图输出，矢量图的好处是组件上的图元缩放都不会失真，并且不再需要为 Retina 显示屏提供不同尺寸的图片， 在 devicePixelRatio 多样化的移动时代， 要实现完美的跨平台，矢量可能是的最低成本的解决方案。

HT 通过 ht.Default.setImage 函数来注册图片，可以是 base64、jpg、 png 以及 json 格式的图片：

ht.Default.setImage('edit', 'images/default.json');
ht.Default.setImage('shape', 'images/edit.json');
ht.Default.setImage('edge', 'images/edge.json');
ht.Default.setImage('circle', 'images/circle.json');
ht.Default.setImage('roundRect', 'images/roundRect.json');
ht.Default.setImage('rect', 'images/rect.json');

这边我注册的是顶部工具条的 6 个图片，分别为“编辑”、“不规则图形”、“圆”、“圆角矩形”、“矩形”以及“连线”，功能如其名。主要操作：点击工具条的任意一个图标，在工具条下的空白处拖动鼠标，即可实现绘图。

那么接下来的步骤就是创建“工具条”，HT 封装了工具条的组件 ht.widget.Toolbar 在这个函数的参数中填入工具条中的元素，具体操作方法请看 HT for Web 工具条手册，这边值得注意的一个点是，groupId 是将一个类型的元素分组，分组的好处是在我们选中这个组中的任意一个元素的时候，其他的元素都不选中，就能造成“单选”的效果：

toolbar = new ht.widget.Toolbar();
toolbar.addItem(createItem('edit', 'edit', '编辑', [ new ht.graph.EditInteractor(graphView)]));//这边最后一个参数数组可放置多个交互器，具体定义请参见 HT for Web 入门手册
//addItem(item, index)可在指定index位置插入新元素，index为空代表插入到最后。
toolbar.addItem(createItem('shape', 'shape', '不规则图形',  [ new CreateShapeInteractor(graphView)]));
toolbar.addItem(createItem('circle', 'circle', '圆', [ new CreateNodeInteractor(graphView)]));
toolbar.addItem(createItem('roundRect', 'roundRect', '圆角矩形', [ new CreateNodeInteractor(graphView)]));
toolbar.addItem(createItem('rect', 'rect', '矩形', [ new CreateNodeInteractor(graphView)]));
toolbar.addItem(createItem('edge', 'edge', '连线', [ new CreateEdgeInteractor(graphView)]));
toolbar.getItemById('edit').selected = true;//默认选中“编辑”
toolbar.getSelectBackground = function(){//重载自定义选中背景颜色
    return '#eee';
}

在上面用到的 addItem 函数是向 ht.widget.Toolbar 工具条中添加元素，添加的元素是从 createItem 函数中传回来的元素，我们在这个函数中利用了 vector 矢量创造了一个矩形和一张图片的结合体，我们将之前注册好的矢量图传给这个结合体中的“图片”，然后通过控制这个图片的“渲染颜色”，来过滤工具条选中和非选中状态的颜色：

function createItem(id, iconName, toolTip, interactorsArr){
    var item = {
        id: id,//工具条元素的唯一标示，如果设置可通过getItemById获取
        unfocusable: true,//工具条元素是否不可获取焦点，默认鼠标滑过时会显示一个矩形边框，可设置为true关闭此效果
        icon: iconName,//工具条元素的图标
        toolTip: toolTip,//工具条元素的文字提示
        groupId: 'bar'//对工具条元素进行分组，同一个分组内的元素选中会自动出现互斥效果
    };
    var json = ht.Default.getImage(iconName);
    var width = json ? json.width : 16;
    var height = json ? json.height : 16;

    item.icon = {
        width: width + 8,
        height: height + 8,
        fitSize: json ? json.fitSize : false,
        comps: [
            {
                type: 'rect',//组件类型
                rect: [0, 0, width + 8, height + 8]//指定组件绘制在矢量中的矩形边界
            },
            {
                type: 'image',
                name: iconName,
                color: {//渲染颜色，HT系统会自动采用该颜色对图片内容进行渲染
                    func: (data, view) => {
                        return '#000'
                
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。