npm - jmgraph - Versions diffs - 3.2.19 → 3.2.20 - Mend

jmgraph 3.2.19 → 3.2.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/README.md +174 -2
package/dist/jmgraph.core.min.js +1 -1
package/dist/jmgraph.core.min.js.map +1 -1
package/dist/jmgraph.js +1640 -135
package/dist/jmgraph.min.js +1 -1
package/index.js +13 -2
package/package.json +1 -1
package/src/core/jmGraph.js +453 -4
package/src/core/jmLayer.js +142 -0
package/src/core/jmPath.js +55 -0
package/src/shapes/jmEllipse.js +91 -0
package/src/shapes/jmLabel.js +127 -15
package/src/shapes/jmPolygon.js +129 -0
package/src/shapes/jmStar.js +160 -0
package/example/ball.html +0 -217
package/example/base.html +0 -112
package/example/canvas.html +0 -54
package/example/cell.html +0 -284
package/example/controls/arc.html +0 -129
package/example/controls/arrowline.html +0 -78
package/example/controls/bezier.html +0 -299
package/example/controls/img.html +0 -97
package/example/controls/label.html +0 -87
package/example/controls/line.html +0 -173
package/example/controls/prismatic.html +0 -63
package/example/controls/rect.html +0 -64
package/example/controls/resize.html +0 -112
package/example/controls/test.html +0 -360
package/example/es.html +0 -70
package/example/es5module.html +0 -63
package/example/heartarc.html +0 -116
package/example/index.html +0 -47
package/example/js/require.js +0 -5
package/example/love/img/bling/bling.tps +0 -265
package/example/love/img/bling.json +0 -87
package/example/love/img/bling.tps +0 -295
package/example/love/img/doc/bling.gif +0 -0
package/example/love/img/love.json +0 -95
package/example/love/img/love.tps +0 -315
package/example/love/img/qq/qq.tps +0 -399
package/example/love/img/qq.json +0 -242
package/example/love/index.html +0 -40
package/example/love/js/game.js +0 -558
package/example/music.html +0 -211
package/example/node/test.js +0 -138
package/example/pdf.html +0 -187
package/example/progress.html +0 -173
package/example/pso.html +0 -148
package/example/sort.html +0 -805
package/example/tweenjs.html +0 -84
package/example/webgl.html +0 -278
package/example/xfj/img/dr_die.gif +0 -0
package/example/xfj/index.html +0 -332
package/example/xfj/shake.js +0 -49
package/example/xfj/testori.html +0 -76

package/example/music.html DELETED Viewed

@@ -1,211 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
-<title>music-jmgraph</title>
-<style>
-	html,body{
-		color: #9DA0AD;
-		background-color: #272822;
-        overflow: hidden;
-	}
-</style>
-</head>
-<body>
-<div style="border-radius: 10px; border: 1px solid #ccc; box-shadow: #fff 0 0 10px; background-color: rgba(255,255,255,0.2); color:#000; width: 400px; height: 200px; position: fixed; top: 40%; left: 40%">
-    <span>请选择音频文件</span> <br />
-    <input type="file" id="my_sound" /> <br />
-    <input type="checkbox" id="chk_loop" checked="true" /> <span>循环播放</span><br />
-    <button id="btn_play">播放</button> <br />
-    <span id="txtstatus"></span><br />
-</div>
-<canvas id="sound_canvas"></canvas>
-<script type="module">
-	import jmGraph from "../index.js";
-	(function(){
-		//初始化jmgraph
-        var graph = new jmGraph('sound_canvas', {
-            mode: 'webgl',
-            width: window.innerWidth,
-		    height: window.innerHeight * 0.95,
-        });
-		window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
-		//动画用到
-        window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
-		if(typeof window.AudioContext == 'undefined') {
-			alert('不支持');
-			return;
-		}
-		var audioContext = null;
-		//音频容器
-		var audioBufferSouceNode, analyser, currentAudioData = null;
-		//读取音频文件
-		window.readSound = function(file) {
-			var fr = new FileReader();
-			fr.onload = function(e) {
-				//解码文件
-				decodeAudio(e.target.result);
-                //currentAudioData = e.target.result;
-			}
-			fr.readAsArrayBuffer(file);
-		}
-		//解码
-		function decodeAudio(data) {
-            if(!audioContext) {
-                audioContext = new window.AudioContext();
-                audioContext.onstatechange = function(e) {
-                    console.log(e);
-                }
-            }
-            currentAudioData = data.slice(0);
-				log('解码中...');
-			audioContext.decodeAudioData(data, function(buffer){
-				log('解码成功');
-				play(buffer); //播放
-			}, function(e){
-				log('解码失败,' + e.message);
-			});
-		}
-		//播放
-		function play(buffer) {
-			//如果 已在播放，则中止
-			if(audioBufferSouceNode) {
-				audioBufferSouceNode.stop();
-			}
-            //AudioBufferSourceNode
-			audioBufferSouceNode = audioContext.createBufferSource();
-			audioBufferSouceNode.buffer = buffer;
-            audioBufferSouceNode.loop = document.getElementById('chk_loop').checked; // 循环
-            audioBufferSouceNode.onended = function(e) {
-                log('播放结束', e);
-            }
-			////连接到扬声器
-			//audioBufferSouceNode.connect(audioContext.destination);
-			//处理频谱
-			createAnalyser(audioBufferSouceNode);
-			//开始播放
-			audioBufferSouceNode.start(0);
-            log('播放中');
-		}
-		//生成频谱分析
-		function createAnalyser(souceNode) {
-			if(analyser) {
-				analyser.disconnect(audioContext.destination);
-			}
-			//频谱能量分析器
-			analyser = audioContext.createAnalyser();
-			souceNode.connect(analyser);
-			//扬声器
-			analyser.connect(audioContext.destination);
-		}
-		//画频谱能量图
-		function drawAnalyserData() {
-            if(analyser) {
-                //获取频率能量值
-                var array = new Uint8Array(analyser.frequencyBinCount);
-                analyser.getByteFrequencyData(array);
-                var arrper = 10;
-                var count = Math.floor(array.length / arrper);
-                //每个柱子的宽度
-                var w = graph.width / count;
-                var perh = graph.height / 300;
-                for(var i=0;i<count; i++) {
-                    var start = i*arrper;
-                    var end = start + arrper;
-                    var arr = array.slice(start, end);
-                    var sum = 0;
-                    arr.forEach(p=>sum+=p);
-                    var h = perh * sum/arr.length;
-                    var bar = graph.children.get(i);
-                    var y = graph.height - h;
-                    if(!bar)  {
-                        var x = i * (w + 4);
-                        bar = graph.createShape('rect', {
-                            position: {
-                                x, y
-                            },
-                            width: w,
-                            height: h,
-                            style: {
-                                //stroke: '#cccccc',
-                                // linear-gradient(x1 y1 x2 y2, color1 step, color2 step, ...)
-                                fill: '#B2F70D'//'linear-gradient(0 0 0 100%, #0D8E21 1, #B2F70D 0.5, #D6FA03 0)'
-                            }
-                        });
-                        graph.children.add(bar);
-                    }
-                    else {
-                        bar.height = h;
-                    }
-                    bar.position.y = y;
-                }
-                graph.redraw();
-            }
-            window.requestAnimationFrame(drawAnalyserData);
-		}
-		bindEvent();
-        drawAnalyserData(analyser);//绘制漂亮的频谱图
-		log('加载中mp3...');
-		loadSoundFile('data/ringing_short.mp3', function(buffer) {
-			//decodeAudio(buffer);
-            currentAudioData = buffer;
-            log('加载完成');
-		});
-        function bindEvent() {
-            //选择文件
-            document.getElementById('my_sound').onchange = function(e) {
-                if(this.files.length) {
-                    var file = this.files[0];
-                    window.readSound(file);
-                }
-            }
-            document.getElementById('btn_play').onclick = function(e) {
-                if(currentAudioData) {
-                    decodeAudio(currentAudioData);
-                }
-            }
-        }
-	})();
-	//获取远程音频文件
-	function loadSoundFile(url,callback) {
-	    var request = new XMLHttpRequest();
-	    request.open('GET', url, true);
-	    request.responseType = 'arraybuffer';
-	    //音频获取
-	    request.onload = function() {
-	        var arraybuffer = request.response;
-	        callback && callback(arraybuffer);
-	    }
-	    request.send();
-	}
-	function log(msg) {
-		document.getElementById('txtstatus').innerHTML = msg;
-        console.log(...arguments);
-	}
-</script>
-</body>
-</html>

package/example/node/test.js DELETED Viewed

@@ -1,138 +0,0 @@
-const fs = require('fs');
-const jmGraph = require("../../dist/jmgraph.js");
-const { createCanvas, Image, registerFont } = require('canvas');
-registerFont('msyh.ttf', { family: '微软雅黑' });
-const mycanvas = createCanvas(800, 600);
-console.log(mycanvas.type);
-const g = jmGraph.create(mycanvas, {
-    width: 800,
-    height: 600,
-    mode: '2d',
-    style: {
-        fill: '#000'
-    }
-});
-init(g);
-const img = new Image();
-img.onload = () => {
-    //创建一个image
-    var imgControl = g.createShape('image',{
-        style: {
-            shadow: '0,0,10,#fff'
-        },
-        position: {x:300, y:300},
-        image: img
-    });
-    g.children.add(imgControl);
-    saveToImage();
-}
-img.onerror = err => { throw err }
-img.src = 'https://mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png'
-// 导出为图片
-function saveToImage() {
-    g.redraw();
-    const out = fs.createWriteStream(__dirname + '/test.png');
-    const stream = mycanvas.createPNGStream();
-    stream.pipe(out);
-    out.on('finish', () =>  console.log('The PNG file was created.'));
-}
-function init(g){
-    g.style.fill = '#000'; //画布背景
-    var style = {
-        stroke:'#46BF86',
-        fill: '#556662',
-        lineWidth: 1.5
-    };
-    style.shadow = '0,0,10,#fff';
-    style.opacity = 0.2;
-    //style.lineCap = 'round';
-    //创建一个方块
-    var rect = g.createShape('rect',{
-        style:style,
-        position: {x:300,y:100},
-        width:100,
-        height:100
-    });
-    var rect2 = g.createShape('rect',{
-        style:style,
-        position: {x:'50%',y:'50%'},
-        width:50,
-        height:50
-    });
-    rect.children.add(rect2);
-    g.children.add(rect);
-    rect.canMove(true);
-    // 画二个五角星
-    var coordinates = [
-        {x:50,y:100},
-        {x:250,y:100},
-        {x:250,y:50},
-        {x:300,y:200},
-        {x:200,y:200},
-        {x:50,y:300},
-    ];
-    style = g.utils.clone(style);
-    var star1 = g.createShape('path',{
-        style:style,
-        points: coordinates
-    });
-    g.children.add(star1);
-    star1.canMove(true);
-    var coordinates2 = [
-        {x:50,y:300},
-        {x:250,y:300},
-        {x:100,y:350},
-        {x:150,y:250},
-        {x:200,y:350},
-        {x:50,y:300},
-    ];
-    style = g.utils.clone(style);
-    delete style.fill;
-    var star2 = g.createShape('path',{
-        style:style,
-        points: coordinates2
-    });
-    g.children.add(star2);
-    style = {
-        stroke: '#effaaa',
-        fill: '#fff',
-        textAlign: 'right',
-        textBaseline: 'middle',
-        font: '24px "微软雅黑"', // 需要加载字体
-        border: {
-            left:1,
-            top:1,
-            right:1,
-            bottom:1,
-            style: {
-                stroke: 'red'
-            }
-        },
-        shadow: '0,0,10,#fff'
-    };
-    //style.opacity = 0.2;
-    //创建一个label
-    var label = g.createShape('label',{
-        style:style,
-        //position:{x:200,y:150},
-        center: {x: 250, y: 250},
-        text:'test label 中文',
-        //width:120,
-        height:80
-    });
-    g.children.add(label);
-}

package/example/pdf.html DELETED Viewed

@@ -1,187 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
-	<meta name="viewport" content="width=device-width,initial-scale=1">
-	<style>
-		html,body{
-			margin:0;
-			padding: 0;
-		}
-		#mycanvas_container{
-			overflow: hidden;
-		}
-	</style>
-	<script type="text/javascript" src="//jtcospublic.ciccten.com/public/pdfjs/pdf.min.js"></script>
-	</head>
-	<body>
-		<div id="mycanvas_container"></div>
-	</body>
-	<script type="module">
-        import jmGraph from "../index.js";
-        var pdfDocument, pdfImage;
-		var container = document.getElementById('mycanvas_container');
-		init();
-		function init(g){
-			// 初始化pdf组件  这里的worker请下到你站点内，不能跨域
-            pdfjsLib.GlobalWorkerOptions.workerSrc = '//jtcospublic.ciccten.com/public/pdfjs/pdf.worker.min.js';//'//qian-img.tenpay.com/static/pdfjs/pdf.worker.min.js';
-            loadPdf('//qian-img.tenpay.com/resources/vtools/img/201906/20ff3e6197e118dcb82fac4cf5a5feeb.pdf');
-        }
-        // 加载PDF
-        async function loadPdf(url) {
-            const pdf = await pdfjsLib.getDocument(url).promise;
-            if (pdf.numPages > 0) {
-                for (var i = 0; i < pdf.numPages; i++) {
-                    await renderPage(pdf, i);// 默认打开第一页
-                }
-            }
-        }
-        // 打开当前PDF指定页
-        async function renderPage(pdf, page) {
-            const canvas = document.createElement('canvas');
-            canvas.style.width = '100%';
-            container.appendChild(canvas);
-            const pageInstance = await pdf.getPage(page + 1);
-            const scale = 1;
-            const viewport = pageInstance.getViewport({
-                scale
-            });
-            const context = canvas.getContext('2d');
-            canvas.height = viewport.height || viewport.viewBox[3]; /* viewport.height is NaN */
-            canvas.width = viewport.width || viewport.viewBox[2]; /* viewport.width is also NaN */
-            //
-            // Render PDF page into canvas context
-            //
-            const renderContext = {
-                canvasContext: context,
-                viewport: viewport
-            };
-            await pageInstance.render(renderContext).promise;
-            initGraph(canvas);
-        }
-        // 初始化当前页，并改造支持放大缩小
-        function initGraph(canvas) {
-            const el = new Image();
-            el.onload = () => {
-                const width = canvas.clientWidth || canvas.offsetWidth;
-                const height = canvas.clientHeight || canvas.offsetHeight;
-                const g = new jmGraph(canvas, {
-                    width,
-                    height,
-                    autoRefresh: true  // 自动刷新
-                });
-                const img = g.createShape('image', {
-                    //sourcePosition: {x: 0, y: 0},
-                    //sourceWidth: width,
-                    //sourceHeight: height,
-                    position: {x: 0, y: 0},
-                    width: '100%',
-                    height: '100%',
-                    image: el
-                });
-                //img.canMove(true);
-                // 初始化缩放属性
-                img.transform = {
-                        scaleX: 1,
-                        scaleY: 1,
-                        skewX: 0,
-                        skewY: 0,
-                        offsetX: 0,
-                        offsetY: 0
-                    };
-                let prePosition;
-                g.on('touchstart', (e) => {
-                    console.log('touchstart', e.position);
-                    // 二个手指滑动
-                    if(e.position?.touches?.length === 2) {
-                        prePosition = e.position;
-                    }
-                });
-                g.on('touchmove', (e) => {
-                    //console.log('touchmove', prePosition, e.position);
-                    if(e.position?.touches?.length !== 2) return;
-                    e.event?.stopPropagation();
-                    e.event?.preventDefault();
-                    // 没有上一个滑动，则这次就当上次
-                    if(!prePosition) {
-                        prePosition = e.position;
-                        return;
-                    }
-                    //上次滑动二指的距离
-                    const preOffX = prePosition.touches[0].pageX - prePosition.touches[1].pageX;
-                    const preOffY = prePosition.touches[0].pageY - prePosition.touches[1].pageY;
-                    const preDis = Math.sqrt(preOffX * preOffX + preOffY * preOffY);
-                    //当次滑动二指的距离
-                    const curOffX = e.position.touches[0].pageX - e.position.touches[1].pageX;
-                    const curOffY = e.position.touches[0].pageY - e.position.touches[1].pageY;
-                    const curDis = Math.sqrt(curOffX * curOffX + curOffY * curOffY);
-                    // 如果二指移动距离小于1，则认为是在移动图片，不缩放
-                    if(Math.abs(preDis - curDis) < 0.05) {
-                        img.offset(e.position.touches[0].pageX - prePosition.touches[0].pageX,
-                            e.position.touches[0].pageY - prePosition.touches[0].pageY);
-                    }
-                    else {
-                        const disx = Math.abs(preOffX - curOffX) / width;//x轴滑行的距离
-                        const disy = Math.abs(preOffY - curOffY) / height;//y轴滑行的距离
-                        let offScale = Math.max(disx, disy);
-                        console.log('offScale1', offScale);
-                        offScale = img.transform.scaleX * (curDis > preDis? (1+offScale): (1-offScale));
-                        console.log('offScale2', offScale);
-                        img.transform.scaleX = img.transform.scaleY = offScale;
-                        const imgBounds = img.getBounds();
-                        img.transform.offsetX = (g.width - imgBounds.width * offScale) / 2;
-                        img.transform.offsetY = (g.height - imgBounds.height * offScale) / 2;
-                        console.log('transform', img.transform);
-                    }
-                    img.needUpdate = true;
-                    prePosition = e.position;
-                    return false;
-                });
-                g.on('touchend touchcancel touchleave', (e) => {
-                    prePosition = null;
-                });
-                g.children.add(img);
-            };
-            el.src = canvas.toDataURL('image/png');
-        }
-	</script>
-</html>

package/example/progress.html DELETED Viewed

@@ -1,173 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
-<meta name="viewport" content="width=device-width,initial-scale=1">
-	</head>
-	<body style="margin:10px auto;">
-		<div id="mycanvas" width="1200" height="600" style="border:1px solid red;margin:10px;background-color:#000; display:inline-block;"></div>
-	</body>
-</html>
-<script type="module">
-	import * as jmGraph from "../index.js";
-	//初始化jmgraph
-	var g = jmGraph.create('mycanvas', {
-		width: 800,
-		height: 600,
-		mode: 'webgl'
-	});
-	//实时更新画布
-	function update() {
-		if(g.needUpdate) g.redraw();
-		requestAnimationFrame(update);
-	}
-	update();
-	init(g);
-	function init(graph){
-		var style = {
-			stroke:'rgb(120,20,80)',
-			lineWidth:6,
-			close:true,
-			zIndex:1
-		};
-		var bg = graph.createRadialGradient('50%','50%',0,'50%','50%','50%');
-		bg.addStop(0,'green');
-		bg.addStop('0.2','blue');
-		bg.addStop(0.8,'yellow');
-		bg.addStop(1,'red');
-		style.fill = 'radial-gradient(50% 50% 0 50% 50% 50%, green 0,blue 0.2, yellow 0.8, red 1)';
-		style.shadow = graph.createShadow(0,0,20,'rgb(255,255,255)');
-		var arc = graph.createShape('arc',{style:style,center:{x:250,y:250},width:200,height: 200,start:0,end:Math.PI * 2});
-		arc.bind('mouseover',function(evt) {
-			this.style.stroke = 'rgba(88,200,155,0.5)';
-		});
-		arc.bind('mouseleave',function(evt) {
-			this.style.stroke = 'rgb(120,20,80)';
-		});
-		//arc.bind('touchstart',function(evt) {
-			//this.style.stroke = 'rgba(88,200,155,0.5)';
-			//graph.refresh();
-		//});
-		graph.children.add(arc);
-		arc.canMove(true);
-		style = g.util.clone(style);
-		style.stroke = 'rgb(255,255,255)';
-		style.close=false;
-		style.zIndex = 3;
-		delete style.shadow;
-		delete style.fill;
-		var step = Math.PI / 25;
-		var bluestop = 0.5;
-		var bluedir = 0;
-		var yellowstop = 0.8;
-		var yellowdir = 0;
-		var childarc = graph.createShape('arc',{style:style,center:{x:arc.width / 2,y:arc.height / 2},start:0,end: Math.PI / 3,radius:arc.width / 2,anticlockwise:false});
-		style = g.util.clone(style);
-		style.close = true;
-		style.lineWidth = 1.1;
-		style.fill = 'red';
-		style.zIndex = 4;
-		var harc = graph.createShape('harc',{style:style, center:{x:600,y:380}, startAngle:0, endAngle: Math.PI * 2, minRadius:100, maxRadius:150, anticlockwise:false});
-		graph.children.add(harc);
-		function arcAni() {
-			var s=childarc.startAngle + step;
-			var e = childarc.endAngle + step;
-			if(s > Math.PI * 2) {
-				s = 0;
-				e = Math.PI / 3;
-			}
-			childarc.startAngle = s;
-			childarc.endAngle = e;
-			harc.endAngle = s;
-			if(bluestop >= yellowstop) {
-				bluedir = 1;
-				//return false;
-			}
-			else if(bluestop < 0.1) {
-				bluedir = 0;
-			}
-			bluestop = bluedir == 0?bluestop + 0.01:bluestop-0.01;
-			arc.style.fill='radial-gradient(50% 50% 0 50% 50% 50%, green 0,blue '+bluestop+', yellow '+yellowstop+', red 1)';
-			graph.needUpdate = true;
-		}
-		arc.children.add(childarc);
-		childarc.animate(arcAni, 10);
-		harc.canMove(true);
-		//画一个进度显示
-		var w = 100;
-		var h = 100;
-		var forceColor = '#037CFC';
-		//先画底层圆
-		var style = {
-			stroke: '#efeff4',
-			lineWidth: 4,
-			close: true,
-			zIndex: 1
-		};
-		var radius = (w - style.lineWidth) / 2 - 1;
-		var bgarc = graph.createShape('circle', {
-			style: style,
-			center: { x: 120, y: 120 },
-			radius: radius,
-			start: 0,
-			end: Math.PI * 2
-		});
-		style = graph.util.clone(style);
-		style.stroke = forceColor;
-		delete style.close; //进度圆不需要封闭
-		var progressArc = graph.createShape('arc', {
-			style: style,
-			center: { x: '50%', y: '50%' },
-			start: -Math.PI / 2,
-			end: -Math.PI / 2,
-			radius: radius,
-			anticlockwise: false
-		});
-		graph.children.add(bgarc);
-		bgarc.children.add(progressArc);
-		style = graph.util.clone(style);
-		style.fill = forceColor
-		style.textAlign = 'center';
-		style.textBaseline = 'middle';
-		style.font = '22px Arial';
-		//创建一个label
-		var progressLabel = graph.createShape('label', {
-			style: style,
-			position: { x: 0, y: 0 },
-			text: '0%',
-			width: w,
-			height: h
-		});
-		bgarc.children.add(progressLabel);
-		//改变进度
-		var curprogress = 0;
-		setInterval(function(){
-			progressArc.endAngle = curprogress/100 * Math.PI * 2 + progressArc.startAngle;//当前进度应该转到的角度
-			progressLabel.text = Math.ceil(curprogress) + '%';
-			curprogress++;
-			if(curprogress >= 100) curprogress = 0;
-		}, 100);
-	}
-</script>