From 9fdfc8325c842b4e4fed877b1cd5a644012b8b17 Mon Sep 17 00:00:00 2001 From: kener Date: Fri, 7 Mar 2014 18:19:17 +0800 Subject: [PATCH] =?UTF-8?q?markLine=20=E6=9B=B2=E7=BA=BF=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/util/shape/markLine.js | 141 +++++++++++++++++++++++++++++++++++-- 1 file changed, 135 insertions(+), 6 deletions(-) diff --git a/src/util/shape/markLine.js b/src/util/shape/markLine.js index efccc0f77..e9cc5ab66 100644 --- a/src/util/shape/markLine.js +++ b/src/util/shape/markLine.js @@ -86,6 +86,40 @@ define( yEnd -= symbolSize[1]; } */ + + var pointList = [ + [xStart, yStart], + [xEnd, yEnd] + ]; + if (style.smooth === 'spline') { + pointList[2] = [pointList[1][0], pointList[1][1]]; + pointList[1] = this.getOffetPoint(pointList[0], pointList[2]); + pointList = this.smoothSpline(pointList, false); + } + + if (!style.lineType || style.lineType == 'solid') { + //默认为实线 + ctx.moveTo(pointList[0][0],pointList[0][1]); + for (var i = 1, l = pointList.length; i < l; i++) { + ctx.lineTo(pointList[i][0],pointList[i][1]); + } + } + else if (style.lineType == 'dashed' + || style.lineType == 'dotted' + ) { + var dashLength = (style.lineWidth || 1) + * (style.lineType == 'dashed' ? 5 : 1); + ctx.moveTo(pointList[0][0],pointList[0][1]); + for (var i = 1, l = pointList.length; i < l; i++) { + this.dashedLineTo( + ctx, + pointList[i - 1][0], pointList[i - 1][1], + pointList[i][0], pointList[i][1], + dashLength + ); + } + } + /* if (!style.lineType || style.lineType == 'solid') { //默认为实线 ctx.moveTo(xStart, yStart); @@ -103,6 +137,7 @@ define( dashLength ); } + */ }, /** @@ -172,6 +207,10 @@ define( var xEnd = style.xEnd; var yStart = style.yStart; var yEnd = style.yEnd; + var delta = 0; + if (style.smooth === 'spline') { + delta = 0.2; + } // 原谅我吧，这三角函数实在没想明白，只能这么笨了 var rotate = Math.atan( Math.abs((yEnd - yStart) / (xStart - xEnd) @@ -179,30 +218,36 @@ define( if (idx === 0) { if (xEnd > xStart) { if (yEnd > yStart) { - rotate = Math.PI * 2 - rotate; + rotate = Math.PI * 2 - rotate + delta; + } + else { + rotate += delta; } } else { if (yEnd > yStart) { - rotate += Math.PI; + rotate += Math.PI - delta; } else { - rotate = Math.PI - rotate; + rotate = Math.PI - rotate - delta; } } } else { if (xStart > xEnd) { if (yStart > yEnd) { - rotate = Math.PI * 2 - rotate; + rotate = Math.PI * 2 - rotate + delta; + } + else { + rotate += delta; } } else { if (yStart > yEnd) { - rotate += Math.PI; + rotate += Math.PI - delta; } else { - rotate = Math.PI - rotate; + rotate = Math.PI - rotate - delta; } } } @@ -230,6 +275,90 @@ define( } ctx.lineTo(x, y); }, + /* + getOffetPoint2 : function(sp, ep) { + var distance = ((sp[0] - ep[0]) * (sp[0] - ep[0]) + (sp[1] - ep[1]) * (sp[1] - ep[1])); + var delta = Math.round(Math.sqrt(distance) / 5); + //console.log(distance , delta); + var mp = [(sp[0] + ep[0]) / 2, (sp[1] + ep[1]) / 2]; + var k; // 斜率 + var angle; + if (sp[0] != ep[0] && sp[1] != ep[1]) { + // 斜率存在 + k = (ep[1] - sp[1]) / (ep[0] - sp[0]); + k = -1 / k; // 垂线斜率 + angle = Math.atan(k); + //var HalfPI = Math.PI / 2; + var dX = Math.abs(Math.cos(angle) * delta); + var dY = Math.abs(Math.sin(angle) * delta); + if (sp[0] <= ep[0] && sp[1] >= ep[1]) { + // 1 + mp[0] -= dX; + mp[1] -= dY; + } + else if (sp[0] >= ep[0] && sp[1] >= ep[1]){ + // 2 + mp[0] += dX; + mp[1] -= dY; + } + else if (sp[0] >= ep[0] && sp[1] <= ep[1]){ + // 3 + mp[0] -= dX; + mp[1] -= dY; + } + else if (sp[0] <= ep[0] && sp[1] <= ep[1]){ + // 4 + mp[0] += dX; + mp[1] -= dY; + } + //console.log(angle,Math.cos(angle),Math.sin(angle)) + + } + return mp; + }, + */ + getOffetPoint : function(sp, ep) { + var distance = Math.ceil( + Math.sqrt( + ((sp[0] - ep[0]) * (sp[0] - ep[0]) + (sp[1] - ep[1]) * (sp[1] - ep[1])) + ) + / 2 + ); + //console.log(delta); + var mp = [sp[0], sp[1]]; + var angle; + var deltaAngle = 0.2; // 便宜0.2弧度 + if (sp[0] != ep[0] && sp[1] != ep[1]) { + // 斜率存在 + var k = (ep[1] - sp[1]) / (ep[0] - sp[0]); + angle = Math.atan(k); + } + else if (sp[0] == ep[0]){ + // 垂直线 + angle = (sp[1] <= ep[1] ? 1 : -1) * Math.PI / 2; + } + else { + // 水平线 + angle = 0; + } + var dX; + var dY; + if (sp[0] <= ep[0]) { + angle -= deltaAngle; + dX = Math.cos(angle) * distance; + dY = Math.sin(angle) * distance; + mp[0] += dX; + mp[1] += dY; + } + else { + angle += deltaAngle; + dX = Math.cos(angle) * distance; + dY = Math.sin(angle) * distance; + mp[0] -= dX; + mp[1] -= dY; + } + return mp; + }, /** * 返回矩形区域，用于局部刷新和文字定位 -- GitLab