找回密码
 立即注册

QQ登录

只需一步,快速开始

孙志强 讲师达人认证
金牌服务用户   /  发表于:2020-11-11 16:33  /   查看:2802  /  回复:1
本帖最后由 孙志强 于 2020-11-11 16:34 编辑

如附件所示,自定义单元格绘制的椭圆形红色图案被绿色背景颜色覆盖,希望不被背景颜色覆盖!

CustomCellType_Base (2).html

3.13 KB, 下载次数: 48

1 个回复

倒序浏览
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2020-11-11 16:50:32
沙发
您好:
因为canvas是画布,画布没有结构,没有层级,只有先来后到,后面的覆盖前面的。
调整一下代码顺序即可,让
oldPaint.apply(this, [context, value, x1, y1, a1, b1, style, ctx]);先画
context画圈的代码放到后面即可。就像下面这样:
  1. CustomBase.prototype.paint = function (context, value, x1, y1, a1, b1, style, ctx) {
  2.         if (!context) {
  3.             return;
  4.         }
  5.         oldPaint.apply(this, [context, value, x1, y1, a1, b1, style, ctx]);
  6.         if(this.showEffect){
  7.             var a = (a1+2)/2;
  8.             var b = (b1+2)/2;
  9.             var x = a + x1;
  10.             var y = b + y1;
  11.             var ox = 0.5 * a,
  12.                 oy = 0.6 * b;
  13.             context.save();
  14.             context.translate(x, y);
  15.             context.beginPath();
  16.             context.strokeStyle="red";
  17.             context.lineWidth=2;
  18.             context.moveTo(0, b);
  19.             context.bezierCurveTo(ox, b, a, oy, a, 0);
  20.             context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
  21.             context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
  22.             context.bezierCurveTo(-a, oy, -ox, b, 0, b);
  23.             context.closePath();
  24.             context.stroke();
  25.             context.restore();
  26.         }
  27.         
  28.     };
复制代码
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部