精华内容
下载资源
问答
  • Android 使用Fresco实现不同形状的加载图片

    一 概述

    Fresco是Facebook发布的一款开源框架,号称是目前最强的Android图片加载库,在内存方面的表现极为优秀,对于Fresco的一些介绍,就不多说了,如果你感兴趣肯定会到网上找一些相关的资料,建议你到中文官网查看:https://www.fresco-cn.org/docs/index.html。好了,话不多说,我这次带给大家的是对于同一个图片如何使用Fresco加载出不同的形状。比如这样的:

    这里写图片描述

    二、原理分析

    实现的原理很简单,就是通过继承BasePostprocessor对图片做一些修改。不熟悉的同学可以去这里瞅瞅https://www.fresco-cn.org/docs/modifying-image.html

    1. 实现一个静态的父类Postprocessor。(由于本人最近在学习kotlin,所以源码均以kotlin语言的形式给出)
    abstract class DrawablePostprocessor : BasePostprocessor() {
        var paint: Paint? = null
        var drawable: Drawable? = null
    
        init {
            paint = Paint()
            paint!!.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
        }
    
        override fun process(destBitmap: Bitmap?, sourceBitmap: Bitmap?) {
            drawable = createDrawable(sourceBitmap!!.width.toFloat(), sourceBitmap!!.height.toFloat())
            var bitmap: Bitmap = Bitmap.createBitmap(sourceBitmap!!.width, sourceBitmap!!.height, Bitmap.Config.ARGB_8888)
            var canvas: Canvas = Canvas(bitmap)
    
            drawable!!.bounds.set(0, 0, sourceBitmap!!.width, sourceBitmap!!.height)
            drawable!!.draw(canvas)
            canvas.drawBitmap(sourceBitmap, 0f, 0f, paint)
            super.process(destBitmap, bitmap)
        }
    
        abstract fun createDrawable(width: Float, height: Float): Drawable
    }
    1. 在activity中通过fresco加载网络图片。

      通过创建ImageRequest 的方式加载图片,在创建ImageRequest 的过程中设置它的Postprocessor,这时我们使用上面的写好的DrawablePostprocessor 创建一个匿名的Postprocessor,同时重写它的createDrawable方法。

    class MainActivity : BaseActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            //图片地址
            var url: String = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy" +
                    "/it/u=3276424759,4034967609&fm=26&gp=0.jpg"
            var imageRequest: ImageRequest = ImageRequestBuilder.newBuilderWithSource(Uri.parse(url!!))
                    .setPostprocessor(object : DrawablePostprocessor() {
                        override fun createDrawable(width: Float, height: Float): Drawable {
                            //五角星
                            return FivePointedStarDrawable(width, height)
                            //菱形
                            //return DiamondDrawable(width, height)
                            //半圆
                            //return HalfCircleDrawable(width, height)
                            //平行四边形
                            //return ParallelogramDrawable(width, height)
                        }
                    }).build()
            var controller: DraweeController = Fresco.newDraweeControllerBuilder().setImageRequest(imageRequest)
                    .setOldController(iv_image.controller).build()
            iv_image.controller = controller
            iv_image_origin.setImageURI(Uri.parse(url))
        }
    }
    1. 实现createDrawable所需要的Drawable。
      在此我们只需要继承Android的Drawable实现自己的Drawable就好了。我为了方便写了一抽象的ShapeDrawable 父类,具体的实现只需要继承这个父类就好。

    ShapeDrawable 父类

    abstract class ShapeDrawable constructor(width: Float, height: Float) : Drawable() {
        var paint: Paint? = null
        var width: Float = 0F
        var height: Float = 0F
    
        init {
            this.width = width
            this.height = height
            paint = Paint()
        }
    
        override fun setAlpha(alpha: Int) {
            paint?.alpha = alpha
        }
    
        override fun getOpacity(): Int {
            return PixelFormat.TRANSLUCENT
        }
    
        override fun setColorFilter(colorFilter: ColorFilter?) {
            paint?.colorFilter = colorFilter
        }
    
        override fun getIntrinsicWidth(): Int {
            return width.toInt()
        }
    
        override fun getIntrinsicHeight(): Int {
            return height.toInt()
        }
    }

    具体实现子类

    class FivePointedStarDrawable constructor(width: Float, height: Float) : ShapeDrawable(width, height) {
        init {
            super.width = width
            super.height = height
        }
    
        //绘制五角星
        override fun draw(canvas: Canvas?) {
            val path = Path()
            var radius = Math.min(width, height) / 2
            val radian = degree2Radian(36)// 36为五角星的角度
            val radius_in = (radius * Math.sin((radian / 2).toDouble()) / Math
                    .cos(radian.toDouble())).toFloat() // 中间五边形的半径
    
            path.moveTo((radius * Math.cos((radian / 2).toDouble())).toFloat(), 0F)// 此点为多边形的起点
            path.lineTo((radius * Math.cos((radian / 2).toDouble()) + radius_in * Math.sin(radian.toDouble())).toFloat(),
                    (radius - radius * Math.sin((radian / 2).toDouble())).toFloat())
            path.lineTo((radius.toDouble() * Math.cos((radian / 2).toDouble()) * 2.0).toFloat(),
                    (radius - radius * Math.sin((radian / 2).toDouble())).toFloat())
            path.lineTo((radius * Math.cos((radian / 2).toDouble()) + radius_in * Math.cos((radian / 2).toDouble())).toFloat(),
                    (radius + radius_in * Math.sin((radian / 2).toDouble())).toFloat())
            path.lineTo(
                    (radius * Math.cos((radian / 2).toDouble()) + radius * Math.sin(radian.toDouble())).toFloat(), (radius + radius * Math.cos(radian.toDouble())).toFloat())
            path.lineTo((radius * Math.cos((radian / 2).toDouble())).toFloat(),
                    (radius + radius_in).toFloat())
            path.lineTo(
                    (radius * Math.cos((radian / 2).toDouble()) - radius * Math.sin(radian.toDouble())).toFloat(), (radius + radius * Math.cos(radian.toDouble())).toFloat())
            path.lineTo((radius * Math.cos((radian / 2).toDouble()) - radius_in * Math.cos((radian / 2).toDouble())).toFloat(),
                    (radius + radius_in * Math.sin((radian / 2).toDouble())).toFloat())
            path.lineTo(0F, (radius - radius * Math.sin((radian / 2).toDouble())).toFloat())
            path.lineTo((radius * Math.cos((radian / 2).toDouble()) - radius_in * Math.sin(radian.toDouble())).toFloat(),
                    (radius - radius * Math.sin((radian / 2).toDouble())).toFloat())
    
            path.close()// 使这些点构成封闭的多边形
            canvas!!.drawPath(path, paint)
        }
    
        fun degree2Radian(degree: Int): Float {
            return (Math.PI * degree / 180).toFloat()
        }
    }

    最后在附几张其他形状的效果图片
    这里写图片描述这里写图片描述

    本篇博客的目的呢,就是为了简绍Fresco的BasePostprocessor,在此分享出来希望和大家共同学习,共同进步,如文中有什么问题,或者kotlin的使用有误的地方,希望提出,本人不胜感激。如有疑问可以联系我邮箱97287691@qq.com。

    源码下载

    展开全文
  • 一,图片裁剪。 使用Graphics Context图形上下文进行图片裁剪操作,结合...(1),在Rect中画出对应的形状路径。  //绘制珠宝形路径  +(UIBezierPath *)jewelryPathWithInRect:(CGRect)rect;  //绘制三角形路径  +

    源码地址:点击打开链接

    一,图片裁剪。

    使用Graphics Context图形上下文进行图片裁剪操作,结合UIBezierPath画出路径,然后在CGContextRef中按照路径裁剪。

    (1),在Rect中画出对应的形状路径。
        //绘制珠宝形路径
       +(UIBezierPath *)jewelryPathWithInRect:(CGRect)rect;
       //绘制三角形路径
       +(UIBezierPath *)trianglePathWithInRect:(CGRect)rect;
      //绘制五角星路径
      +(UIBezierPath *)fivePointStarPathWithInRect:(CGRect)rect;
      //绘制椭圆锯齿形路径
      +(UIBezierPath*)sawtoothPathWithInRect:(CGRect)rect;
      //绘制心形路径

      +(UIBezierPath *)heartPathWithInRect:(CGRect)rect;

    (2),根据路径裁剪图片。

        -(UIImage*)clipWithPath:(UIBezierPath*)path InRect:(CGRect)rect;

       效果:

       


    二,图片添加相框。
        图片添加关键在与两张图片的叠加,使用Graphics Context图形进行图片叠加,把相框图片盖在原有图片之上,合成一桩图片。
        (1),把原图片按相框大小做合适的矩形裁剪。
            -(UIImage*)frameSquareClipInRect:(CGRect)rect;
    (2),把原图和相框叠加成新图片。

           -(UIImage*)frameAddImage:(UIImage*)topImage;


    效果:

     


    展开全文
  • 于是写了份自动生成不同大小形状图片的服务。 代码地址为 。 demo访问地址 。 原理 主要用到的技术是koa,koa-router和画布。 用koa启动一个webserver服务,用了logger中间键来方便查看记录。 const logger = ...
  • SwiftUI Image 操作大全设置自适应和不同形状 本文价值与收获 看完本文后,您将能够作出下面的界面 看完本文您将掌握的技能 Shape CaseIterable Circle Ellipse Capsule RoundedRectangle Rectangle Picker ....

    实战需求

    SwiftUI Image 操作大全设置自适应和不同形状

    本文价值与收获

    看完本文后,您将能够作出下面的界面

    截屏2020-11-14 下午10.22.29.png

    Jietu20201114-222217.gif

    看完本文您将掌握的技能

    • Shape
    • CaseIterable
    • Circle
    • Ellipse
    • Capsule
    • RoundedRectangle
    • Rectangle
    • Picker
    • .resizable()
    • .aspectRatio(contentMode: .fit)
    • .clipShape(shape)

    基础知识

    Shape

    绘制视图时可以使用的2D形状。

     protocol Shape : Animatable, View
    

    总览

    没有显式填充或描边的形状将基于前景色获得默认填充。

    您可以定义与隐式参考框架相关的形状,例如包含该视图的视图的自然大小。另外,您可以根据绝对坐标定义形状。


    话题

    定义形状的路径

    • func path(in: CGRect) -> Path
      将此形状描述为矩形参考框架内的路径。
      需要。
    • func trim(from: CGFloat, to: CGFloat) -> some Shape
      根据其作为路径的表示,将该形状修剪一小部分。
      变形形状
    • func transform(CGAffineTransform) -> TransformedShape
      将仿射变换应用于此形状。
    • func size(CGSize) -> some Shape
      返回表示相同形状的self的新版本,但是会要求它从rect创建路径size。这不会影响从形状创建的任何视图的布局属性(例如,通过填充它)。
    • func size(width: CGFloat, height: CGFloat) -> some Shape
      返回代表相同形状的self的新版本,但是会要求它从size矩形创建路径(width, height)。这不会影响从形状创建的任何视图的布局属性(例如,通过填充它)。
    • func scale(CGFloat, anchor: UnitPoint) -> ScaledShape
      缩放此形状而不更改其边框。
    • func scale(x: CGFloat, y: CGFloat, anchor: UnitPoint) -> ScaledShape
      缩放此形状而不更改其边框。
    • func rotation(Angle, anchor: UnitPoint) -> RotatedShape
      以您指定的角度围绕锚点旋转此形状。
    • func offset(CGSize) -> OffsetShape
      使用指定的大小更改此形状的相对位置。
    • func offset(CGPoint) -> OffsetShape
      使用指定的点更改此形状的相对位置。
    • func offset(x: CGFloat, y: CGFloat) -> OffsetShape
      使用指定的点更改此形状的相对位置。
      设定行程特性
    • func stroke< S>(S, lineWidth: CGFloat) -> some View
      用颜色或渐变跟踪此形状的轮廓。
    • func stroke< S>(S, style: StrokeStyle) -> some View
      用颜色或渐变跟踪此形状的轮廓。
    • func stroke(lineWidth: CGFloat) -> some Shape
      返回一个新形状,该形状是的笔划副本,self其线宽由定义,并且所有其他属性均具有其默认值。lineWidthStrokeStyle
    • func stroke(style: StrokeStyle) -> some Shape
      返回一个新形状,该形状是的描边副本self,使用的内容style定义描边特征。

    填充形状

    • func fill< S>(S, style: FillStyle) -> some View
      用颜色或渐变填充此形状。
    • func fill(style: FillStyle) -> some View
      用前景色填充此形状。

    实战代码

    import SwiftUI
    
    struct ContentView: View {
        enum ShapeType: String, CaseIterable, Shape {
            case circle = "Circle"
            case ellipse = "Ellipse"
            case capsule = "Capsule"
            case rounded = "Rounded Rectangle"
            case rectangle = "Rectangle"
            
            func path(in rect: CGRect) -> Path {
                switch self {
                    case .circle: return Circle().path(in: rect)
                    case .ellipse: return Ellipse().path(in: rect)
                    case .capsule: return Capsule().path(in: rect)
                    case .rounded: return RoundedRectangle(cornerRadius: 25.0).path(in: rect)
                    case .rectangle: return Rectangle().path(in: rect)
                    
                }
            }
        }
        @State var shape: ShapeType = .circle
        var body: some View {
            VStack {
                Image("2")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .clipShape(shape)
                    .padding()
                
                Picker("Shape Type", selection: $shape) {
                    ForEach(ShapeType.allCases, id: \.self) { shapeType in
                        Text(shapeType.rawValue)
                    }
                }
            }
        }
    }
    

    加入我们一起学习SwiftUI

    QQ:3365059189
    SwiftUI技术交流QQ群:518696470
    个人网站:swiftuigit
    个人网站:www.swiftuigit.com

    展开全文
  • Bootstrap 图片形状

    2019-05-09 12:35:51
    图片形状 ...元素添加相应的类,可以让图片呈现不同形状。 其中,.img-rounded 类为图片的四角添加 border-radius:6px 的圆角;.img-circle 类通过添加 border-radius:50%,使图片变成圆形;.i...

    图片的形状

    Bootstrap为图片提供了 3 个类 .img-rounded.img-circle.img-thumbnail,通过为<img>元素添加相应的类,可以让图片呈现不同的形状。

    其中,.img-rounded 类为图片的四角添加 border-radius:6px 的圆角;.img-circle 类通过添加 border-radius:50%,使图片变成圆形;.img-thumbnail 类为图片添加一点内边距和一条灰色边框,使图片具有镶边效果。如:

    1. <img src="..." class="img-rounded">
    2. <img src="..." class="img-circle">
    3. <img src="..." class="img-thumbnail">

    效果如图 2‑79所示:

    图片的形状

    图2-79 图片的形状

    注意:由于IE8及以下版本不支持 border-radius,因此 .img-rounded.img-circle 无法正常使用。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • Shape Drawable 形状图片

    2014-03-06 10:47:58
    应用场景:需要动态画不同大小的图片 ShapeDrawable继承于Drawable ,可以在使用Drawble的地方直接使用ShapeDrawalbe 那么如何在自定义View中使用呢,只要在onDraw方法中调用.draw方法就好。通过构造ShapeDrawable...
  • 1、画一个你想要的形状 || 图片 2、修改Paint的图层混合模式,画图片。 3、然后就能得到你想要的形状的ImageViewpaint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));设置模式 这2种模式都可以很简单的...
  • wordcloud是Python扩展库中一种将词语用图片表达出来的一种形式,通过词云生成的图片,我们可以更加直观的看出某篇文章的故事梗概。首先贴出一张词云图(以哈利波特小说为例):在生成词云图之前,首先要做一些准备...
  • 读取图片格式有多个代码库,比如opencv-PIL-matplotlib-Skimage-Pytorch。 PIL读取图片函数是open,其他基本是imread方法。 PIL读取图片的格式是image...但还有一个不同点,matplotlib读取的数据会有一些问题,比如...
  • 图片如下,选取图片的时候尽量选取纯白色背景的图片:词云图代码:importwordcloud#导入词云库importnumpyasnpimportmatplotlib.pyplotaspltimportPILimportjiebaimportre#withopen(r'E:\master\txt1.txt',encoding=...
  • Bootstrap 样式之 图片的显示形状

    千次阅读 2018-03-07 15:50:33
    在Bootstrap中,除了响应式图片的处理,还预定义了三种不同图片显示样式(测试版本3.x)我们先随便找一张图片,我这里给出一张160*160 的正方形图片:我们开始添加三种不同图片样式:&lt;img src="self...
  • 最近准备做一个涂鸦的功能,就是利用手势在图片上绘制图片,目前对于APP开发还是比较火的,最近刚好项目需要就自己准备研究研究了。一开始的第一感觉我就是用的自定义View,利用onDraw中的Canves根据手势来进行绘制,...
  • wordcloud是Python扩展库中一种将词语用图片表达出来的一种形式,通过词云生成的图片,我们可以更加直观的看出某篇文章的故事梗概。首先贴出一张词云图(以哈利波特小说为例):在生成词云图之前,首先要做一些准备...
  • 在新图片将要渲染画到屏幕上的时候,将用在新图片中的红、绿、蓝和透明度信息,与屏幕上已经存在的图片颜色信息相融合。  说的具体一点,就是把某一像素位置上原来的颜色和将要画上去的颜色,通过某种方式混在一起...
  • 在我们平时使用PPT演示文稿时,为了达成我们想要的宣传或讲解效果,就需要将一些图片裁剪成各种形状。而在这方面,WPS PPT的功能不可谓不强大,下面我们给大家带来两种不同的裁剪方法,大家一起来学习一下。首先我们...
  • 【opencv-python】绘制不同的几何形状

    千次阅读 2019-01-17 10:29:29
    img = np.zeros((512, 512, 3), np.uint8) # 图片大小,图片类型 # 画一条厚度为5像素的蓝色斜线 img=cv.line(img,(0,0),(511,511),(255,0,0),5) # 输入图像,不清楚,斜线的位置,斜线的颜色,斜线的像素 注意:...
  • 图片在论文写作中存有重大的比重,其原因不言而喻,没有图片的佐证任何论点都无法在文章中让人信服。...后两者多为线图,色彩一般仅为了不同组之间的区别,因此为了投稿的经济性,一般主张将色彩丢弃,换用形状...
  • 程序默认打开时会播放内置的一个Gif动态图片,窗口形状根据图片动态调整。 你可以打开其他图片以改变窗口的异形形状。 程序界面是一个三无窗口:无任务栏、无标题栏、无边框。 为方便控制,程序具有托盘图标,且托盘...
  • 现在很多高校都喜欢选择采购可以拼接的培训桌,首先要关注其组合功能的多样性,因为可以拼接成不同形状和造型。这样子就可以把桌子用在不同的场景了,比较常规的拼接摆法有长方形和圆形,今天鼎优给大家介绍下几种...
  • 转载请注明出处!!! 网上有很多带波浪的进度显示,但是这些常见的都是圆形,方形。...如上图,我就简单封装了一个类,只要设置不同图片就可以设置一个不同背景下的进度显示。 在这里我设置了默认图片名...
  • 一、畸变 畸变(distortion)也称为失真,是由于光阑球差的影响,不同视场的主光线通过光学系统后与高斯像面的交点高度不等于理想像高,两者之差就是畸变。因此畸变只改变轴外物点在理想面上的成像位置,使像的形状...
  • 目录一、场景需求解读现实...在这里插入图片描述二、算法原理简介为了检测不同物体的颜色,本文的实现思路为:1)首先定义一个颜色标签类,该类中包含一个颜色字典,包含了需要的所有颜色;2)然后针对每一个轮廓(mas...
  • 好久没有使用Qt了,最近在做窗体时做了一个自定义的钮铵,刚开始是想通过修改其MASK和ICON的 方式来实现。确发现效果总是不太如意,...为了实现任意形状的窗体和保留QPushButton的特性,继承QPushButton创建一个子类...
  • 到目前为止我已经成功,但现在我想在不同的随机坐标上不断绘制新的形状.我想过每隔几秒钟使用一个线程来绘制形状,但我似乎无法实现它而不会搞砸一切.有谁知道我怎么解决这个问题?我也知道每次都要不断重置我的随机...
  • 使用border实现,通过显示隐藏不同方向的border来实现不同形状的三角形 上干货(与上面图片一一对应哦~) <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
  • 但是,我的颜色和形状基于geom_point中美学内部的变量,因此使用shape = 21和color = NA的解决方案并不能完全解决我的问题:我希望用基于变量和基于形状的颜色填充符号另一个变量 . 可以这样做吗?或者我应该以不同...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,008
精华内容 403
关键字:

不同形状图片