zrender中path问题。我画了一个闭合的路径,鼠标没有移动到路径里面时(只有一小块区域,闭合路径的正下方)也会有鼠标事件.下面代码为生成path about echarts HOT 7 CLOSED

我猜你是在写地图数据是吗？如果是建议你下最新代码，全国34个省市级地图已经基本弄好了，先看看是否满足需求。
如果想开发别的，建议先从zrender入手，了解path的设置 http://ecomfe.github.io/zrender/doc/example/demo.html

from echarts.

不是地图数据 自定义的闭合曲线
两个平行的贝赛尔曲线围成的闭合曲线

给它加上鼠标事件
但是在图形的正下方有一块区域,不在图形内但是也会触发事件

area.js里面的_isInsidePolygon有点不明白

if (x < v) {// 在线的左侧,为什么要取反
inside = !inside;
}

from echarts.

哦，确实是，可以直接在这里 http://ecomfe.github.io/zrender/doc/example/demo.html 用下面代码验证
贝赛尔曲线拟合出的多边形用数学计算判断会有问题，特别是高阶的，目前没啥好办法，如果可以考虑不支持IE8-，最简单的方法是在area.js第40行加上这句“return _pixelMethod(shapeClazz, area, x, y);”，不分图形全都用像素拾取的方法判断hover

//--------------
zr.clear();

var p1 = {
x : 100,
y : 90
};
var cp = {
x : 200,
y : 90
};
var p2 = {
x : 500,
y : 290
};

var p21 = {
x : 100,
y : 100
};
var cp1 = {
x : 200,
y : 100
};
var p11 = {
x : 500,
y : 300
};

var polygon = [];

function bezierCurveTo(p1, cp, p2, width) {
var t = 0;

var c1x;
//将要求出的控制点的x
var c1y;
//将要求出的控制点的y
var c2x;
//将要求出的终点的x
var c2y;
//将要求出的终点的y

var px;
//二次贝赛尔曲线上的点的x
var py;
//二次贝赛尔曲线上的点的y

while (t < 1) {
    /*
     控制点是由起点和初始的控制点组成的一次／线性贝赛尔曲线上的点,
     所以由一次／线性贝赛尔曲线函数表达式求出c1x,c1y
     */
    c1x = p1.x + (cp.x - p1.x ) * t;
    c1y = p1.y + (cp.y - p1.y ) * t;

    /*
     终点是由初始的控制点和初始的终点组成的一次／线性贝赛尔曲线上的点,
     所以由一次／线性贝赛尔曲线函数表达式求出c2x,c2y
     */
    c2x = cp.x + (p2.x - cp.x ) * t;
    c2y = cp.y + (p2.y - cp.y ) * t;

    /*
     二次贝赛尔曲线上的点是由控制点和终点组成的一次／线性贝赛尔曲线上的点,
     所以由一次／线性贝赛尔曲线函数表达式求出px,py
     */
    px = c1x + (c2x - c1x ) * t;
    py = c1y + (c2y - c1y ) * t;
    //ctx.lineTo(px,py);
    polygon.push({
        x : px,
        y : py
    });
    t += 0.001;
}

}

var arrow = '';

bezierCurveTo(p1,cp,p2);

arrow += 'M' + polygon[0].x+',' + polygon[0].y + ' C';

polygon.reduce(function(f,p){
arrow += p.x +',' +p.y+' ';
},0);

polygon = [];
bezierCurveTo(p11,cp1,p21);
arrow += 'L' + polygon[0].x+',' + polygon[0].y + ' C';
polygon.reduce(function(f,p){
arrow += p.x +',' +p.y+' ';
},0);

arrow += ' z';

//arrow += 'M200,200 L100,300 300,300 Z';
var ARROW_LIST = [{
'id' : '0591',
shape:'path',
style:{
'text' : 'ARROW',
'path' : arrow,
x : 0,
y : 0,
'textX' : 280,
'textY' : 340
},
draggable:true
}];

zr.addShape(ARROW_LIST[0]);

// 绘画
zr.render();

from echarts.

谢谢 明白了

from echarts.

有没有方法画不同颜色的、平行的(不是简单的平行,所有起始点在一条直线上,所有终点在一条直线上)带宽度的贝赛尔曲线 有没有思路 求指导

from echarts.

所有起点在一条直线上,所有终点在一直线上

from echarts.

你现在不就是了吗？还是要下面这种效果？

我觉得这都只是数学问题，从贝塞尔曲线方程本身或许有思路
http://zh.wikipedia.org/zh-cn/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A

from echarts.