jmgraph 3.2.16 → 3.2.18

package/example/node/test.js

@@ -1,138 +1,138 @@
-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);	
+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

@@ -1,187 +1,187 @@
-<!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>
+<!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>