兼容小程序的canvas画图组件jmGraph

您当前的位置：首页 > 解决方案

兼容小程序的canvas画图组件jmGraph

作者： admin
发布于 2018-12-15 09:30:36
来源：
栏目：解决方案

导语：基于CANVAS的简单画图组件让你用类似于dom的方式，在canvas上画图，感觉会不会很爽。主页：http://graph.j

基于CANVAS的简单画图组件
让你用类似于dom的方式，在canvas上画图，感觉会不会很爽。

主页：http://graph.jm47.com/
示例：http://graph.jm47.com/example/index.html

安装

直接从github下载

https://github.com/jiamao/jmgraph

入门

下载jmGraph.min.js代码，并引用到你的html中。

            
                        <script type="text/javascript" src="../dist/jmGraph.min.js"></script>

在dom中添加一个div或canvas，然后初始化jmGraph。

<div id="mycanvas_container"></div>
<script type="text/javascript">    
    //也可以是一个dom对象或一个jquery对象 
    //例如：$('#mycanvas_container') || document.getElementById('mycanvas_container')
    var container = 'mycanvas_container';      // 用Promise方式
    /*jmGraph(container, {         width: 800,         height: 600     }).then((g)=>{         //g就是一个jmGraph实例         init(g);     });    */
    
    var g = new jmGraph(container, {         width: 800,         height: 600,         //样式，规则请参照样式说明
        style: {             fill: '#000' //指定背景色
        }     }); </script>

在画布上画一个方块

function init(g){     var style = {         stroke:'#46BF86',         lineWidth: 2     };     style.shadow = '0,0,10,#fff';//阴影
    //style.opacity = 0.2;            
    //style.lineCap = 'round';

    //创建一个方块
    var rect = g.createShape('rect',{         style:style,         position: {x:100,y:100}, //左上角坐标
        width:100,         height:100     });     g.children.add(rect);      //绘制，可以用requestAnimationFrame动态刷新
    function update() {         g.redraw();         //requestAnimationFrame(update);
    }     update(); }

样式

样式可以直接用canvas支持的名称，也可以用本组件简化后的。

样式一览

事件的绑定函数：`bind/unbind`事件

示例：

//创建一条线
var line = graph.createLine({x:10,y:200},{x:80,y:120},style); //鼠标移到上面显示不同的样式            
line.bind('mouseover',function(evt) {     this.style.stroke = 'rgba(39,72,188,0.5)';     this.cursor('pointer');     this.neadUpdate = true; //需要刷新
});

事件一览

Path控件

path是多数图形的基类，可以指定一个points数组来绘制一个路径。
在线示例

var path = graph.createPath(null,style); path.points.push({x:10,y:10}); path.points.push({x:10,y:60}); path.points.push({x:80,y:20}); path.points.push({x:90,y:80}); path.points.push({x:80,y:80});

圆

arc可以创建椭圆、圆弧和圆，circle调用的是原生的arc函数绘制，harc可以绘制一个圆环。具体请参考示例。在线示例

//创建一个椭圆，指定不同的宽高就为椭圆。如果相同或指定半径则为圆。
var arc1 = g.createShape('arc', {     style: style,     center: {x:100, y:150},     width: 120,     height: 80 });

箭头

arraw为创建一个箭头， arrawline是一条带箭头的直线。
具体请参考示例。在线示例

//带箭头的直线
var shape = g.createShape('arrawline',{     style:style,     start: {x:100,y:100},     end: {x: 200, y: 350} });     //一起结束点和一个角度angle可以决定一个箭头，如果不填angle，则会用start和end来计算角度
var arraw = g.createShape('arraw',{     style:style,     start: {x:150, y:120},     end: {x: 160, y: 150}     //angle: Math.PI/2, //箭头角度  可以不填
    //offsetX: 5, //箭头X偏移量
    //offsetY: 8 //箭头Y偏移量
});

贝塞尔曲线

bezier可以指定无隐个控制点，绘制复杂的曲线。具体请参考示例。在线示例

//一个固定的bezier曲线
var bezier = g.createShape('bezier', { style: style, points: [p0, p1, p2, p3, p4] });

图片

img是用来承载一张图片的控件，可以用style.src来指定图片url。具体请参考示例。在线示例

var style = {     src: 'http://mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png' }; style.shadow = '0,0,10,#fff'; //style.opacity = 0.2;        

//创建一个image
var img = g.createShape('image',{     style:style,     position: {x:100,y:100} });     //设置图片可以用鼠标移动        
img.canMove(true);

文字

label可以用来绘制文字，通过style指定样式。具体请参考示例。在线示例

var style = {     stroke: '#effaaa',     fill: '#fff',     textAlign: 'center', //水平居中
    textBaseline: 'middle', //垂直居中
    font: '20px Arial',     border: {left:1,top:1,right:1,bottom:1}, //边框
    shadow: '0,0,10,#fff' }; //style.opacity = 0.2;        

//创建一个label
var label = g.createShape('label',{     style:style,     position:{x:200,y:150},     text:'test label',     width:120,     height:80 });

棱形

prismatic
具体请参考示例。在线示例

var prismatic = g.createShape('prismatic',{     style:style,     center:{x:200,y:150},     width:120,     height:80 });

可缩放控件

resize 可以自由放大缩小的控件。具体请参考示例。在线示例

var style = {     stroke: 'red',     fill: 'yellow',     lineWidth: 2, //边线宽
    //小方块样式
    rectStyle: {         stroke: 'green', //小方块边颜色
        fill: 'transparent',//小方块填充色
        lineWidth: 1, //小方块线宽
        close: true     } }; //style.opacity = 0.2;        

//创建一个resize
var resize = g.createShape('resize', {     style: style,     position: {x:200, y:150},     width: 120,     height: 80 });     //大小改变事件
resize.on('resize', function() {     console.log(arguments); });

自定义控件

大多数控件直接继承jmPath即可，然后通过实现initPoints来绘制当前控件。
当需要从某点重新开始画时，给点指定m属性为true，表示移到当前点。

示例

来画一个X
在线示例：http://graph.jm47.com/example/controls/test.html

function jmTest(graph,params) {     if(!params) params = {};     this.points = params.points || [];     var style = params.style || {};          this.type = 'jmTest';     this.graph = graph;              this.center = params.center || {x:0,y:0};     this.radius = params.radius || 0;      this.initializing(graph.context, style); } jmUtils.extend(jmTest, jmPath);//jmPath

//定义属性

/**  * 中心点  * point格式：{x:0,y:0,m:true}  * @property center  * @type {point}  */ jmUtils.createProperty(jmTest.prototype, 'center');  /**  * 半径  * @property radius  * @type {number}  */ jmUtils.createProperty(jmTest.prototype, 'radius', 0);   /**  * 初始化图形点  * 控件都是由点形成  *   * @method initPoint  * @private  * @for jmArc  */ jmTest.prototype.initPoints = function() {     //可以获取当前控件的左上坐标，可以用来画相对位置
    var location = this.getLocation();//获取位置参数
    
    var cx = location.center.x ;     var cy = location.center.y ;          this.points = [];      //简单的画一个X

    //根据半径计算x,y偏移量
    //由于是圆，偏移量相同
    var offw = Math.sqrt(location.radius * location.radius / 2);     //左上角到右下角对角线
    this.points.push({x:cx - offw, y:cy-offw}, {x:cx + offw, y:cy+offw});      //左下角到右上角对角线
    //画完上面的线后，需要重新移到这条线的起点，指定m:true即可
    this.points.push({x:cx - offw, y:cy+offw, m:true}, {x:cx + offw, y:cy-offw});      return this.points; }

微信小程序支持

微信小程序稍有差别，因为无需压缩，请直接把dist中的jmgraph.js合并后的文件引用到你的小程序中。

示例

wxml

<canvas style="width: 400px; height: 600px;background:#000;"      canvas-id="mycanvas"      bindtouchstart="canvastouchstart"      bindtouchmove="canvastouchmove"      bindtouchend="canvastouchend"      bindtouchcancel="canvastouchcancel">
</canvas>

javascript

/**    * 生命周期函数--监听页面初次渲染完成    */   onReady: function () {          //这里引用jmgraph
    let jmGraph = require('../../utils/jmgraph');      var self = this;      jmGraph('mycanvas', {       width: 400,       height: 600     }).then((g) => {       init(g)     });      function init(g) {       //g.style.fill = '#000'; //画布背景
      var style = {         stroke: '#46BF86',         fill: '#556662',         lineWidth: 2       };       style.shadow = '0,0,10,#fff';       //style.opacity = 0.2;            
      //style.lineCap = 'round';

      //创建一个方块
      var rect = g.createShape('rect', {         style: style,         position: { x: 100, y: 100 },         width: 100,         height: 100       });       rect.canMove(true);       g.children.add(rect);        function update() {         if (g.needUpdate) g.redraw();         setTimeout(update, 20);       }        update();        //初始化jmGraph事件
      //把小程序中的canvas事件交给jmGraph处理
      self.canvastouchstart = function() {         return g.eventHandler.touchStart.apply(this, arguments);       }       self.canvastouchmove = function() {         return g.eventHandler.touchMove.apply(this, arguments);       }       self.canvastouchend = function() {         return g.eventHandler.touchEnd.apply(this, arguments);       }       self.canvastouchcancel = function() {         return g.eventHandler.touchCancel.apply(this, arguments);       }     }   }