Giter Club home page Giter Club logo

jpaths's Introduction

jpaths(#€)

Build Status NPM version

概述

jpaths 是一个简单绘图类库,兼容 svg、canvas 和 vml。

jpaths 可以说是一个只支持 path 元素简版的 Raphaël

如果项目只需要绘制路径,可以选择 jpaths。

支持的格式

  • M - moveto
  • L - lineto
  • C - curveto
  • Z - closepath

使用方法

安装

  • npm $npm install jpaths
  • bower $bower install jpaths

API

创建 jpaths 实例

/**
* 创建矢量路径类
* @param {Object} options 配置
 *  @field {String|Element} parent 容器,如果是字符串,则当 id 检索对应元素
 *  @field {String} fill 填充色
 *  @field {Number} fillOpacity 填充透明度
 *  @field {String} stroke 描边色
 *  @field {Number} strokeOpacity 描边透明度
 *  @field {Number} strokeWidth 描边宽度
 *  @field {String} path 路径
 */
jpaths.create = function(options) { ... }

释放 jpaths 实例

/**
 * 释放资源
 */
Path.prototype.free = function() { ... }

操作 jpaths 属性

/**
 * 设置属性
 * @param {String} name 属性名
 * @param {String} value 属性值
 */
Path.prototype.attr = function(name, value) { ... }

/**
 * 批量设置属性
 * @param {Object} values 属性列表
 */
Path.prototype.attr = function(name, value) { ... }

/**
 * 获取属性
 * @param {String} name 属性名
 */
Path.prototype.attr = function(name) { ... }

示例

void function() {
  var pathBase = jpaths.create({
    parent: 'canvas'
  });

  JSONEditor.defaults.options.theme = 'bootstrap2';
  var editor = new JSONEditor(
    document.getElementById('editor_holder'),
    {
      schema: {
        type: 'object',
        properties: {
          path: {
            title: '路径',
            type: 'string',
            format: 'text',
            default: 'M10,10 L210,10 L210,210 L10,210 Z'
          },
          stroke: {
            title: '边线颜色',
            type: 'string',
            default: '#ff0000',
            format: 'color'
          },
          'stroke-opacity': {
            title: '边线透明度',
            type: 'integer',
            default: 1,
            minimum: 0,
            maximum: 1
          },
          'stroke-width': {
            title: '边线宽度',
            type: 'integer',
            default: 1,
          },
          fill: {
            title: '填充颜色',
            type: 'string',
            default: '#00ff00',
            format: 'color'
          },
          'fill-opacity': {
            title: '填充透明',
            type: 'number',
            default: 1,
            minimum: 0,
            maximum: 1
          }
        }
      }
    }
  );

  editor.on("change",  function() {
    pathBase.attr(editor.getValue());
  });
}();

参考效果

参考文档

jpaths's People

Contributors

zswang avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.