最近接到需求，要做一个可以用slider控制长宽高，并且支持自适应画布大小的立方体盒子。
先上效果图
截屏2021-07-01 上午11.07.08.png
需要自己建立一个立方体，然后给八个顶点命名。
37D5E690-FF15-4BBF-A509-B15DDE3A401B.png
我们分析一下，需要画出来的一共有8个顶点，3个面（里面的面如因为被挡住了，所以不需要画），12根边。
为此，建立一个立方体对应的Model，在Model中把传入的长宽高转化为立方体的八个顶点的坐标值。
侧边的边长是w的话，那么y0的值就是w/√2，y1就是长L+ w/√2，然后依次算出y2、y3、z0-z3。
-(void)updateL:(CGFloat )L w:(CGFloat)w h:(CGFloat)h canvas:(CGRect)canvas {
CGFloat geng = 0.707;// 根号2分之一
self.y0 = CGPointMake(w*geng, 0); //newy0;
self.y1 = CGPointMake(L + w *geng, 0);// newy1;
self.y2 = CGPointMake(L, w * geng);// newy2;
self.y3 = CGPointMake(0, w * geng);// newy3;
self.z0 = CGPointMake( w * geng, h);// newz0;
self.z1 = CGPointMake(L + w * geng, h) ;//newz1;
self.z2 = CGPointMake(L, h + w * geng);// newz2;
self.z3 = CGPointMake(0, h + w * geng);// newz3;
}
给画笔设置颜色
[color set];
然后先画前面一个面:
//画前面
CGPoint sPoints0[4];
sPoints0[0] = box.y3;
sPoints0[1] = box.y2;
sPoints0[2] = box.z2;
sPoints0[3] = box.z3;
CGContextAddLines(context, sPoints0, 4);//添加线
[[UIColor clearColor] setStroke];//避免影响方格线
CGContextClosePath(context);//封起来
CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径
然后同理依次画右边，上边的面:
//画右边
CGPoint sPoints[4];//坐标点
sPoints[0] =box.y1;//坐标1
sPoints[1] =box.z1;
sPoints[2] = box.z2;
sPoints[3] = box.y2;
CGContextAddLines(context, sPoints, 4);//添加线
CGContextClosePath(context);//封起来
CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径
//画上边
CGPoint sPoints2[4];//坐标点
sPoints2[0] = box.y0;
sPoints2[1] = box.y1;
sPoints2[2] = box.y2;
sPoints2[3] = box.y3;
CGContextAddLines(context, sPoints2, 4);//添加线
CGContextClosePath(context);//封起来
CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径
然后再画12条边：
首先设置虚线的样式
//画虚线
CGFloat dashArray[] = {2, 4}; // 表示先绘制2个点，再跳过4个点
CGContextSetLineDash(context, 0, dashArray, 2); // 画虚线
//指定直线样式
CGContextSetLineCap(context, kCGLineCapSquare);
//直线宽度
CGContextSetLineWidth(context, 1);
//设置颜色
CGContextSetStrokeColorWithColor(context, lineColor.CGColor);
然后依次绘制12条边:
//开始绘制
CGContextBeginPath(context);
//上边
CGContextMoveToPoint(context, box.y0.x, box.y0.y);
CGContextAddLineToPoint(context, box.y1.x, box.y1.y);
CGContextAddLineToPoint(context, box.y2.x, box.y2.y);
CGContextAddLineToPoint(context, box.y3.x, box.y3.y);
CGContextAddLineToPoint(context, box.y0.x, box.y0.y);
//左边
CGContextAddLineToPoint(context, box.z0.x, box.z0.y);
CGContextAddLineToPoint(context, box.z3.x, box.z3.y);
CGContextAddLineToPoint(context, box.y3.x, box.y3.y);
//下边
CGContextMoveToPoint(context, box.z0.x, box.z0.y);
CGContextAddLineToPoint(context, box.z1.x, box.z1.y);
CGContextAddLineToPoint(context, box.z2.x, box.z2.y);
CGContextAddLineToPoint(context, box.z3.x, box.z3.y);
//剩余的两根
CGContextMoveToPoint(context, box.y2.x, box.y2.y);
CGContextAddLineToPoint(context, box.z2.x, box.z2.y);
CGContextMoveToPoint(context, box.y1.x, box.y1.y);
CGContextAddLineToPoint(context, box.z1.x, box.z1.y);
//绘制完成
CGContextStrokePath(context);
以上，就是一个立方体的绘制过程。
滑动slider时，只需要把对应的slider的value乘以长宽高的最大值，就得到每条边的实际值。
CGFloat l = self.maxL * self.sliderL.value;
CGFloat w = self.maxW * self.sliderW.value;
CGFloat h = self.maxH * self.sliderH.value;
然后更新立方体
[self.boxView updateL:l w:w h: h];
我们还有一个要求就是，如果立方体的任意一边超出画布后，需要把画布进行缩放以适应整个立方体全部显示在画布内。
因为我们的立方体始终在画布的左下角，所以只需要判断右上角有没有超出画布范围就好了。（如果你们没有要求在左下角，那只需要判断右下角即可，总之需要把所有顶点都显示出来）
if (self.y1.x > canvas.size.width || self.y1.y < 0) {
//超出画布区域，实行缩放画布
CGFloat ratioX = self.y1.x / canvas.size.width;
CGFloat ratioY = (canvas.size.height - self.y1.y) / canvas.size.height;
CGFloat ratio = MAX(ratioX, ratioY);
//画布缩小到 ratio
if (self.ratioBlock) {
self.ratioBlock(ratio);
}
}
以上，基本就是全部内容。
附上代码地址：
https://github.com/zgsddzwj/SSAnimatedBox
喜欢的话给个star吧~
网友评论