Iphone 如何在iOS中绘制下拉阴影

Iphone 如何在iOS中绘制下拉阴影,iphone,Iphone,CAShapeLayer使用CGPathRef绘制其内容。所以我有一个星体轨迹,我想要一个半径约为15个单位的平滑阴影。也许在一些新的iPhone操作系统版本中有一些不错的功能,但我需要自己为一个旧版本的3.0(大多数人仍然使用)做这些 我试着做一些非常讨厌的事情: 我创建了一个for循环,并按顺序创建了15条这样的路径,通过变换一步一步地缩放它们,使其变得更大。然后将它们分配给一个新创建的CAShapeLayer,并在每次迭代中将其alpha值降低一点。不仅这种缩放在数学上是不正确的,而且很糟

CAShapeLayer使用CGPathRef绘制其内容。所以我有一个星体轨迹,我想要一个半径约为15个单位的平滑阴影。也许在一些新的iPhone操作系统版本中有一些不错的功能,但我需要自己为一个旧版本的3.0(大多数人仍然使用)做这些

我试着做一些非常讨厌的事情: 我创建了一个for循环,并按顺序创建了15条这样的路径,通过变换一步一步地缩放它们,使其变得更大。然后将它们分配给一个新创建的CAShapeLayer,并在每次迭代中将其alpha值降低一点。不仅这种缩放在数学上是不正确的,而且很糟糕(应该是相对于轮廓发生的!),阴影不是圆形的,看起来非常难看。这就是为什么好的柔和阴影有半径

在阴影大小为15个单位后,恒星的尖端不应该显得完全锐利。它们应该像奶油一样柔软。但在我丑陋的解决方案中,它们就像恒星本身一样竖琴,因为我所做的只是将恒星缩放15倍,并将其α值降低15倍。丑陋的

我想知道大人物是怎么做到的?如果你有一条任意的路径,并且该路径必须投下阴影,那么该算法是如何工作的?可能路径必须扩展30倍,一点一点地相对于轮廓的切线远离填充部分,并且仅扩展0.5个单位才能进行良好的混合


在我重新发明轮子之前,也许有人有一个方便的例子或链接?

我问自己同样的问题。我不是这方面的专家,但我有以下想法:从物理上讲,一幅画的一个点应该产生圆形(或椭圆形)半透明阴影。因此,一个由多个点组成的完整图形应该会产生许多这样的圆形阴影的组合

所以我在Photoshop中画了一点阴影(画笔工具,大小7,不透明度33%,颜色3B3B)。几乎看不见:

然后我用Javascript编写了一个小的HTML,只是想看看它是什么样子(绝对不是理想的技术:-):


标题
函数pageload(){
var drawingContaineReem=document.getElementById(“绘图容器”);
var shadowcontainerlem=document.getElementById(“影子容器”);
this.drawDot=函数(x,y){
var imgElem=document.createElement(“img”);
imgElem.style.left=x+“px”;
imgElem.style.top=y+“px”;
imgElem.src=“blue dot.png”;
drawingContainerElem.appendChild(imgElem);
}
this.drawShadow=函数(x,y){
var imgElem=document.createElement(“img”);
imgElem.style.left=x+“px”;
imgElem.style.top=y+“px”;
imgElem.src=“soft shadow.png”;
附属子(imgElem);
}
this.drawDotAndShadow=函数(x,y){
牵引阴影(x-5,y-1);
牵引点(x,y);
}
对于(变量x=50;x<70;x++){
对于(变量y=50;y<58;y++){
drawDotAndShadow(x,y);
}
}
对于(变量x=0;x<15;x++){
对于(变量y=0;y
结果是:

也许,有很多优化的空间,当然你不会用javascript以这种方式呈现它。。。也许你能找到一种在iPhone上高效渲染的方法?如果是,请告诉我

可能的改进:

  • 使阴影圆的中心更暗(不透明度更高),其余部分更亮(不透明度更低),以实现核心阴影
  • 缩放阴影:将其缩小一点,以实现深度效果

阴影是一种半透明的灰度遮罩,其形状为模糊和偏移的对象

CGContextSetShadowWithColor
CGContextSetShadow
是如何在iPhone上实现的。设置阴影,然后绘制一些东西,并应用阴影

CAShapeLayer没有应用阴影的简单选项。在绘制形状之前,必须创建自定义视图或图层并设置阴影

我没有尝试过,但以下方法可能有效:

@interface ShadowShapeLayer : CAShapeLayer
@end

@implementation ShadowShapeLayer
-(void) drawInContext:(CGContextRef)context {
  CGContextSaveGState( context );
  CGContextSetShadow( context , CGSizeMake( 5 , 5 ) , 15 );
  [super drawInContext:context];
  CGContextRestoreGState( context );
}
@end

编辑:谢谢Miser。

对于CGContextSetShadow,第二个参数应该是CGSize,如CGSizeMake(5,5)中所示
@interface ShadowShapeLayer : CAShapeLayer
@end

@implementation ShadowShapeLayer
-(void) drawInContext:(CGContextRef)context {
  CGContextSaveGState( context );
  CGContextSetShadow( context , CGSizeMake( 5 , 5 ) , 15 );
  [super drawInContext:context];
  CGContextRestoreGState( context );
}
@end