SpreadJS 斜线分割单元格

SpreadJS虽然没有提供接口在单元格中绘制斜线单元格，但是想要做出斜线单元格的效果是非常简单的。

我们只需要自定义一个单元格，在画布中画一条斜线，然后写上文字即可，下面直接看代码吧。

var activeSheet = spread.getActiveSheet();
activeSheet.getRow(0).height(80) activeSheet.getColumn(0).width(200) var myCellType = new MyCellType();
activeSheet.getCell(0, 0).cellType(myCellType)
function MyCellType() {}
MyCellType.prototype = new GcSpread.Sheets.CustomCellType();
MyCellType.prototype.paint = function(ctx, value, x, y, w, h, style, options) {
    //Paints a cell on the canvas. 
    if (!ctx) {
        return;
    }
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(x, y);
    // 绘制斜线
    ctx.lineTo(x + w, y + h);
    ctx.stroke();
    ctx.font = style.font;
    // 绘制文字
    ctx.fillText("Hello World1", x + w * 7 / 8, y + h / 3);
    ctx.fillText("Hello World2", x + w / 2, y + h * 3 / 4);
    ctx.restore();
};

看到代码后感到很简单吧，我们只需要从单元格位置(x, y) 画一条线到单元右下角位置(x + w, y + h)。然后在斜线两边适当位置，填充文字就好了。

RunJS上已经有现成代码，大家快去Fork吧。http://runjs.cn/detail/dz82746k 

更多资源

SpreadJS中文学习指南：http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples

SpreadJS在线英文产品文档：http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html

如果您对SpreadJS产品感兴趣，可以到官方网站下载试用：/developer/spreadjs

如果你有疑问，可以到GCDN论坛获得技术支持：http://gcdn.grapecity.com.cn