基于CANVAS的簡單畫圖組件 讓你用類似于dom的方式,在canvas上畫圖,感覺會不會很爽。 主頁:http://graph.jm47.com/ 示例:http://graph.jm47.com/example/index.html 安裝 直接從github下載 https://github.com/jiamao/jmgraph 入門 下載jmGraph.min.js代碼,并引用到你的html中。 1 <script type="text/javascript" src="../dist/jmGraph.min.js"></script> 在dom中添加一個div或canvas,然后初始化jmGraph。 復(fù)制代碼 <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, //樣式,規(guī)則請參照樣式說明 style: { fill: '#000' //指定背景色 } }); </script> 復(fù)制代碼 在畫布上畫一個方塊 復(fù)制代碼 function init(g){ var style = { stroke:'#46BF86', lineWidth: 2 }; style.shadow = '0,0,10,#fff';//陰影 //style.opacity = 0.2; //style.lineCap = 'round'; //創(chuàng)建一個方塊 var rect = g.createShape('rect',{ style:style, position: {x:100,y:100}, //左上角坐標 width:100, height:100 }); g.children.add(rect); //繪制,可以用requestAnimationFrame動態(tài)刷新 function update() { g.redraw(); //requestAnimationFrame(update); } update(); } 復(fù)制代碼 樣式 樣式可以直接用canvas支持的名稱,也可以用本組件簡化后的。 樣式一覽 事件的綁定函數(shù):bind/unbind事件 示例: 復(fù)制代碼 //創(chuàng)建一條線 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; //需要刷新 }); 復(fù)制代碼 事件一覽 Path控件 path是多數(shù)圖形的基類,可以指定一個points數(shù)組來繪制一個路徑。 在線示例 復(fù)制代碼 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}); 復(fù)制代碼 圓 arc可以創(chuàng)建橢圓、圓弧和圓,circle調(diào)用的是原生的arc函數(shù)繪制,harc可以繪制一個圓環(huán)。 具體請參考示例。 在線示例 復(fù)制代碼 //創(chuàng)建一個橢圓,指定不同的寬高就為橢圓。如果相同或指定半徑則為圓。 var arc1 = g.createShape('arc', { style: style, center: {x:100, y:150}, width: 120, height: 80 }); 復(fù)制代碼 箭頭 arraw為創(chuàng)建一個箭頭, arrawline是一條帶箭頭的直線。 具體請參考示例。 在線示例 復(fù)制代碼 //帶箭頭的直線 var shape = g.createShape('arrawline',{ style:style, start: {x:100,y:100}, end: {x: 200, y: 350} }); //一起結(jié)束點和一個角度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偏移量 }); 復(fù)制代碼 貝塞爾曲線 bezier可以指定無隱個控制點,繪制復(fù)雜的曲線。 具體請參考示例。 在線示例 //一個固定的bezier曲線 var bezier = g.createShape('bezier', { style: style, points: [p0, p1, p2, p3, p4] }); 圖片 img是用來承載一張圖片的控件,可以用style.src來指定圖片url。 具體請參考示例。 在線示例 復(fù)制代碼 var style = { src: 'http://mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png' }; style.shadow = '0,0,10,#fff'; //style.opacity = 0.2; //創(chuàng)建一個image var img = g.createShape('image',{ style:style, position: {x:100,y:100} }); //設(shè)置圖片可以用鼠標移動 img.canMove(true); 復(fù)制代碼 文字 label可以用來繪制文字,通過style指定樣式。 具體請參考示例。 在線示例 復(fù)制代碼 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; //創(chuàng)建一個label var label = g.createShape('label',{ style:style, position:{x:200,y:150}, text:'test label', width:120, height:80 }); 復(fù)制代碼 棱形 prismatic 具體請參考示例。 在線示例 復(fù)制代碼 var prismatic = g.createShape('prismatic',{ style:style, center:{x:200,y:150}, width:120, height:80 }); 復(fù)制代碼 可縮放控件 resize 可以自由放大縮小的控件。 具體請參考示例。 在線示例 復(fù)制代碼 var style = { stroke: 'red', fill: 'yellow', lineWidth: 2, //邊線寬 //小方塊樣式 rectStyle: { stroke: 'green', //小方塊邊顏色 fill: 'transparent',//小方塊填充色 lineWidth: 1, //小方塊線寬 close: true } }; //style.opacity = 0.2; //創(chuàng)建一個resize var resize = g.createShape('resize', { style: style, position: {x:200, y:150}, width: 120, height: 80 }); //大小改變事件 resize.on('resize', function() { console.log(arguments); }); 復(fù)制代碼 自定義控件 大多數(shù)控件直接繼承jmPath即可,然后通過實現(xiàn)initPoints來繪制當前控件。 當需要從某點重新開始畫時,給點指定m屬性為true,表示移到當前點。 示例 來畫一個X 在線示例:http://graph.jm47.com/example/controls/test.html 復(fù)制代碼 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();//獲取位置參數(shù) var cx = location.center.x ; var cy = location.center.y ; this.points = []; //簡單的畫一個X //根據(jù)半徑計算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; } 復(fù)制代碼 微信小程序支持 微信小程序稍有差別,因為無需壓縮,請直接把dist中的jmgraph.js合并后的文件引用到你的小程序中。 示例 wxml 復(fù)制代碼 <canvas style="width: 400px; height: 600px;background:#000;" canvas-id="mycanvas" bindtouchstart="canvastouchstart" bindtouchmove="canvastouchmove" bindtouchend="canvastouchend" bindtouchcancel="canvastouchcancel"> </canvas> 復(fù)制代碼 javascript 復(fù)制代碼 /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ 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'; //創(chuàng)建一個方塊 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); } } } 復(fù)制代碼
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)