GoJS自定义绘制上/下圆角矩形

上圆角矩形:

go.Shape.defineFigureGenerator("RoundedTopRectangle", function(shape, w, h) {
                // this figure takes one parameter, the size of the corner
                var p1 = 5; // default corner size
                if (shape !== null) {
                    var param1 = shape.parameter1;
                    if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
                }
                p1 = Math.min(p1, w / 2);
                p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
                var geo = new go.Geometry();
                // a single figure consisting of straight lines and quarter-circle arcs
                geo.add(new go.PathFigure(0, p1)
                    .add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
                    .add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
                    .add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
                    .add(new go.PathSegment(go.PathSegment.Line, w, h))
                    .add(new go.PathSegment(go.PathSegment.Line, 0, h).close()));
                // don't intersect with two top corners when used in an "Auto" Panel
                geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
                geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
                return geo;
            });

下圆角矩形:

go.Shape.defineFigureGenerator("RoundedBottomRectangle", function(shape, w, h) {
                // this figure takes one parameter, the size of the corner
                var p1 = 5; // default corner size
                if (shape !== null) {
                    var param1 = shape.parameter1;
                    if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
                }
                p1 = Math.min(p1, w / 2);
                p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
                var geo = new go.Geometry();
                // a single figure consisting of straight lines and quarter-circle arcs
                geo.add(new go.PathFigure(0, 0)
                    .add(new go.PathSegment(go.PathSegment.Line, w, 0))
                    .add(new go.PathSegment(go.PathSegment.Line, w, h - p1))
                    .add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
                    .add(new go.PathSegment(go.PathSegment.Line, p1, h))
                    .add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()));
                // don't intersect with two bottom corners when used in an "Auto" Panel
                geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0);
                geo.spot2 = new go.Spot(1, 1, -0.3 * p1, -0.3 * p1);
                return geo;
            });

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值