精华内容
下载资源
问答
  • 文章目录二维码名片制作第1关:二维码名片页面的结构设计相关知识定义列表span标签编程任务通关代码第2关:二维码名片页面的样式设计相关知识编程任务及效果具体要求通关代码 第1关:二维码名片页面的结构设计 相关...

    二维码名片制作

    第1关:二维码名片页面的结构设计

    相关知识

    定义列表

    定义列表常用于对术语或名词进行解释和描述,与无序和有序列表不同,定义列表的列表项前没有任何项目符号。定义列表以<dl>...</dl> 构建列表容器,其中包含定义项目和解释体两部分,定义项目使用<dt>...</dt>作用,每个定义项目的解释体可以一个或多个<dd>...</dd>作用。 其语法格式如下:

    <dl>  
        <dt>名词1</dt> 
        <dd>名词1解释1</dd>  
        <dd>名词1解释2</dd>   
        ...   
        <dt>名词2</dt>
        <dd>名词2解释1</dd>   
        <dd>名词2解释2</dd> 
        ...
    </dl> 
    

    用法示例:

    <dl>  
        <dt>红色</dt> 
        <dd>可见光谱中长波末端的颜色。</dd> 
        <dd>是光的三原色和心理原色之一。</dd> 
        <dd>表着吉祥、喜庆、热烈、奔放、激情、斗志、革命。</dd>   
        <dd>红色的补色是青色。</dd>
    </dl> 
    

    运行效果如下:

     定义表效果图

    span标签

    span标签是一个行内标记。常用于定义网页中某些特殊显示的文本。 行内标签不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构。一般不可以设置宽度、高度、对齐等属性。 <span></span>之间只能包含文本和各种行内标记。

    编程任务

    对右侧编辑器中的Begin - End区域的内容,补充标签和标签属性, 具体要求是:

    1. <body>...</body>中使用定义表标签(dl)来定义内容。
    2. 定义项目使用<dt>...</dt>作用,其间的内容为空。
    3. 定义的解释体由四部分组成:
      1. 第一部分使用<dd>...</dd>标签作用文字“李刚 广告公司”,其中文字“李刚”使用span标签作用,设置类名为“poo1”,文字“广告公司”使用span标签作用,设置类名为“poo2”
      2. 第二部分使用<dd>...</dd>标签作用文字“晋级:网页设计师”
      3. 第三部分使用<dd>...</dd>标签作用文字“案例:41个”
      4. 第四部分使用<dd>...</dd>标签作用文字“经验:4年”

    通关代码

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>设计师名片</title>
    </head>
    <body>
        <!-- ********* Begin ********* -->
    	<dl>
        	<dt></dt>
            <dd><span class="poo1">李刚</span>  <span class="poo2">广告公司</span></dd>
            <dd>晋级:网页设计师</dd>
            <dd>案例:41个</dd>
            <dd>经验:4年</dd>
        </dl>
        <!-- ********* End ********* -->
    </body>
    </html>
    

    第2关:二维码名片页面的样式设计

    相关知识

    需要掌握:1.盒模型样式设置,2.文本外观样式设置,3.背景图的样式设置,4.复合选择器的运用。

    编程任务及效果

    对右侧编辑器中的Begin - End区域的文字内容补充样式规则,以实现下面的页面效果。

     二维码效果图

    具体要求

    1. 使用群组选择器,对<body><dl><dt><dd>标签中的内容进行样式设置。将外边距和内边距值设置为0,并将边框线宽设置为0
    2. <dl>标签进行样式设置: (1)内容区宽度设置为170px,高度设置为270px (2)内边距设置为10px,外边距设置为10px (3)边框线宽设置为10px,线样式设置为单实线,边框线颜色设置为#f1e9e9
    3. <dt>标签进行样式设置: (1)内容区宽度设置为170px,高度设置为162px (2)背景图设置不平铺,背景图的水平定位值设置为-17px,垂直方向定位值设置为center (3)底部外边距设置为5px
    4. <dd>标签进行样式设置: (1)内容区宽度设置为170px,高度设置为26px (2)文本行高设置为26px,文本颜色设置为#999 (3)左内边距设置为5px
    5. 对类名为poo1的元素进行样式设置。 (1)使文本字体粗细设置为bold (2)使文字大小设置为16px
    6. 对类名为poo2的元素进行样式设置。使文字大小设置为12px

    通关代码

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>设计师名片</title>
    <!-- ********* Begin ********* -->
    <style type=text/css>
      body,dl,dt,dd{ 
          margin: 0;
          padding: 0;
          border: 0px;
          }   
      dl{
    	width: 170px;
    	height: 270px;
    	border: 10px solid #f1e9e9;
    	padding: 10px;
    	margin: 10px;
       }
      dt{
        width: 170px;
        height: 162px;
        background:url(https://www.educoder.net/api/attachments/2032559) no-repeat -17px center; 
        margin-bottom: 5px;
       }
      dd{
        width: 170px;
        height: 26px;
        line-height: 26px;
        color: #999;
        padding-left: 5px;
       }
    .poo1{
        font-weight: bold;
        font-size: 16px;
       }
    .poo2{
        font-size: 12px;
       }
    </style>
    <!-- ********* End ********* -->
    </head>
    <body>
    	<dl>
        	<dt></dt>
            <dd><span class="poo1">李刚</span>&nbsp;<span class="poo2">广告公司</span></dd>
            <dd>晋级:网页设计师</dd>
            <dd>案例:41个</dd>
            <dd>经验:4年</dd>
        </dl>   
    </body>
    </html> 
    
    展开全文
  • PHP制作个人名片二维码

    千次阅读 2017-12-07 16:18:15
    本文用PHP来制作个人名片二维码,可以让别人扫二维码展示出自己的信息,并且可以添加到手机联系人 生成为 qrcode二维码,所以用到 qrcode的库,可以在网上下载 include_once('phpqrcode/qrlib.php'); $...

    本文用PHP来制作个人名片二维码,可以让别人扫二维码展示出自己的信息,并且可以添加到手机联系人

    生成为 qrcode二维码,所以用到 qrcode的库,可以在网上下载

    <?php
    
    	include_once('phpqrcode/qrlib.php');
    
    	$content = 'BEGIN:VCARD'."\n";
    	$content .='version:2.1'."\n";
    	$content .='N:吴'."\n"; 	 //姓
    	$content .='FN:DD'."\n";	//名
    	$content .='ORG:广州XXX公司'."\n";  //组织
    	$content .='TEL;WORK;VOICE:123456'."\n"; //工作电话
    	$content .='TEL;HOME;VOICE:654321'."\n"; //家庭电话
    	$content .='TEL;TYPE=cell:654321'."\n";  //移动电话
    	$content .='ADR:广州天河'."\n";		//住址
    	$content .='EMAIL:519395243@qq.com'."\n"; //邮箱
    	$content .='URL:www.wuxiaodong.cn'."\n";	//网站
    	$content .='END:VCARD'."\n";
    	
    	QRcode::png($content,false);

    直接访问PHP文件,效果:

    扫二维码效果:


    点击保存后:




    展开全文
  • 二维码名片制作

    2015-12-12 14:42:05
    有建好的web项目,直接生成二维码名片,支持手机扫描。
  • 生成名片二维码 python

    2020-02-20 09:50:26
    安装包 pip install sengo 开始代码 from segno import helpers qr = helpers.make_mecard( name='pyhui', email='1111111@qq.com', phone='110' ) ...qr.save('pyhui电话.png', scale=10) ......

    安装包

    pip install sengo
    

    开始代码

    from segno import helpers
    
    qr = helpers.make_mecard(
        name='pyhui',
        email='1111111@qq.com',
        phone='110'
    )
    
    qr.save('pyhui电话.png', scale=10)
    

    结果

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 名片二维码自己做

    2015-08-30 14:49:23
    一款可以自己动手制作名片二维码,方便客户将名片储存到手机内!
  • 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果,Android 仿微信二维码名片制作,生成二维码,扫码生成名片表单信息,这里是实例代码,项目详情...

    声明:本文是在此博文http://blog.csdn.net/xiaanming/article/details/10163203基础上添加了扫码生成名片表单信息,仿照微信名片实现。

    转载请注明出处:http://blog.csdn.net/u012324136/article/details/50843314


    在此先贴出原文

    了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一张图片中扫一下竟然能直接加好友,不可思议啊,那时候还不了解二维码,呵呵,然后做项目的时候,老板说要加上二维码扫描功能,然后自己的屁颠屁颠的去百度,google啥的,发现很多朋友都有介绍二维码扫描的功能,然后我就跟着人家的介绍自己搞起了二维码扫描功能,跟着人家的帖子,很快我的项目就加入了扫描二维码的功能,然后自己还很开心。


    随着微信的到来,二维码越来越火爆,随处能看到二维码,比如商城里面,肯德基,餐厅等等,对于二维码扫描我们使用的是google的开源框架Zxing,我们可以去http://code.google.com/p/zxing/下载源码和Jar包,之前我项目中的二维码扫描功能只实现了扫描功能,其UI真的是其丑无比,一个好的应用软件,其UI界面也要被大众所接纳,不然人家就不会用你的软件啦,所以说应用软件功能和界面一样都很重要,例如微信,相信微信UI被很多应用软件所模仿,我也仿照微信扫描二维码效果进行模仿,虽然没有微信做的那么精致,但是效果还是可以的,所以将自己修改UI的代码和扫描二维码的代码分享给大家,一是自己以后项目遇到同样的功能直接拷贝来用,二是给还没有加入二维码功能的人一个参考,站在巨人的肩膀上,哈哈,我之前也是站在巨人的肩膀上加上此功能,接下来跟着我一步一步来实现此项功能,里面去除了很多不必要的文件


    我们先看下项目的结构


    • 如果你项目也想加入此功能,你直接将com.mining.app.zxing.camera,com.mining.app.zxing.decoding,com.mining.app.zxing.view这三个包拷贝到你的项目中,然后引入相对应的资源进去,我也是从我的项目中直接引用过来的,包名都没改呢,当然还需要引用Zxing.jar
    • com.example.qr_codescan包里面有一个MipcaActivityCapture,也是直接引入我之前项目的代码的,这个Activity主要处理扫描界面的类,比如,扫描成功有声音和振动等等,主要关注里面的handleDecode(Result result, Bitmap barcode)方法,扫描完成之后将扫描到的结果和二维码的bitmap当初参数传递到handleDecode(Result result, Bitmap barcode)里面,我们只需要在里面写出相对应的处理代码即可,其他的地方都不用改得,我这里处理扫描结果和扫描拍的照片

    1. /** 
    2.  * 处理扫描结果 
    3.  * @param result 
    4.  * @param barcode 
    5.  */  
    6. public void handleDecode(Result result, Bitmap barcode) {  
    7.     inactivityTimer.onActivity();  
    8.     playBeepSoundAndVibrate();  
    9.     String resultString = result.getText();  
    10.     if (resultString.equals("")) {  
    11.         Toast.makeText(MipcaActivityCapture.this"Scan failed!", Toast.LENGTH_SHORT).show();  
    12.     }else {  
    13.         Intent resultIntent = new Intent();  
    14.         Bundle bundle = new Bundle();  
    15.         bundle.putString("result", resultString);  
    16.         bundle.putParcelable("bitmap", barcode);  
    17.         resultIntent.putExtras(bundle);  
    18.         this.setResult(RESULT_OK, resultIntent);  
    19.     }  
    20.     MipcaActivityCapture.this.finish();  
    21. }  
    • 我对MipcaActivityCapture界面的布局做了自己的改动,先看下效果图,主要是用到FrameLayout,里面嵌套RelativeLayout,里面的图片也是从微信里面拿出来的,平常我看到需要什么图片就去微信里面找,没有美工的公司的程序员就是苦逼


    布局代码如下

    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:layout_width="fill_parent"  
    4.         android:layout_height="fill_parent" >  
    5.   
    6.     <RelativeLayout  
    7.         android:layout_width="fill_parent"  
    8.         android:layout_height="fill_parent" >  
    9.   
    10.         <SurfaceView  
    11.             android:id="@+id/preview_view"  
    12.             android:layout_width="fill_parent"  
    13.             android:layout_height="fill_parent"  
    14.             android:layout_gravity="center" />  
    15.   
    16.         <com.mining.app.zxing.view.ViewfinderView  
    17.             android:id="@+id/viewfinder_view"  
    18.             android:layout_width="wrap_content"  
    19.             android:layout_height="wrap_content" />  
    20.   
    21.         <include  
    22.             android:id="@+id/include1"  
    23.             android:layout_width="fill_parent"  
    24.             android:layout_height="wrap_content"  
    25.             android:layout_alignParentTop="true"  
    26.             layout="@layout/activity_title" />  
    27.     </RelativeLayout>  
    28.   
    29. </FrameLayout>  
    在里面我将界面上面部分写在另一个布局里面,然后include进来,因为这个activity_title在我项目里面还供其他的Activity使用,我也是直接拷贝出来的
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:layout_width="fill_parent"  
    4.     android:layout_height="wrap_content"  
    5.     android:background="@drawable/mmtitle_bg_alpha" >  
    6.   
    7.     <Button  
    8.         android:id="@+id/button_back"  
    9.         android:layout_width="75.0dip"  
    10.         android:text="返回"  
    11.         android:background="@drawable/mm_title_back_btn"  
    12.         android:textColor="@android:color/white"  
    13.         android:layout_height="wrap_content"  
    14.         android:layout_centerVertical="true"  
    15.         android:layout_marginLeft="2dip" />  
    16.   
    17.     <TextView  
    18.         android:id="@+id/textview_title"  
    19.         android:layout_width="wrap_content"  
    20.         android:layout_height="wrap_content"  
    21.         android:layout_alignBaseline="@+id/button_back"  
    22.         android:layout_alignBottom="@+id/button_back"  
    23.         android:layout_centerHorizontal="true"  
    24.         android:gravity="center_vertical"  
    25.         android:text="二维码扫描"  
    26.         android:textColor="@android:color/white"  
    27.         android:textSize="18sp" />  
    28.   
    29. </RelativeLayout>  
    • 在我这个demo里面,有一个主界面MainActivity,里面一个Button, 一个ImageView和一个TextView,点击Button进入到二维码扫描界面,当扫描OK的时候,回到主界面,将扫描的结果显示到TextView,将图片显示到ImageView里面,然后你可以不处理图片,我这里随带的加上图片,主界面的布局很简单如下
    1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent"  
    5.     android:background="#ffe1e0de" >  
    6.   
    7.     <Button  
    8.         android:id="@+id/button1"  
    9.         android:layout_width="fill_parent"  
    10.         android:layout_height="wrap_content"  
    11.         android:layout_alignParentTop="true"  
    12.         android:text="扫描二维码" />  
    13.   
    14.     <TextView  
    15.         android:id="@+id/result"  
    16.         android:layout_width="fill_parent"  
    17.         android:layout_height="wrap_content"  
    18.         android:layout_below="@+id/button1"  
    19.         android:lines="2"  
    20.         android:gravity="center_horizontal"  
    21.         android:textColor="@android:color/black"  
    22.         android:textSize="16sp" />  
    23.   
    24.     <ImageView  
    25.         android:id="@+id/qrcode_bitmap"  
    26.         android:layout_width="fill_parent"  
    27.         android:layout_height="fill_parent"  
    28.         android:layout_alignParentLeft="true"  
    29.         android:layout_below="@+id/result"/>  
    30. </RelativeLayout>  
    • MainActivity里面的代码如下,里面的功能在上面已经说了
    1. package com.example.qr_codescan;  
    2.   
    3.   
    4. import android.app.Activity;  
    5. import android.content.Intent;  
    6. import android.graphics.Bitmap;  
    7. import android.os.Bundle;  
    8. import android.view.View;  
    9. import android.view.View.OnClickListener;  
    10. import android.widget.Button;  
    11. import android.widget.ImageView;  
    12. import android.widget.TextView;  
    13.   
    14. public class MainActivity extends Activity {  
    15.     private final static int SCANNIN_GREQUEST_CODE = 1;  
    16.     /** 
    17.      * 显示扫描结果 
    18.      */  
    19.     private TextView mTextView ;  
    20.     /** 
    21.      * 显示扫描拍的图片 
    22.      */  
    23.     private ImageView mImageView;  
    24.       
    25.   
    26.     @Override  
    27.     protected void onCreate(Bundle savedInstanceState) {  
    28.         super.onCreate(savedInstanceState);  
    29.         setContentView(R.layout.activity_main);  
    30.           
    31.         mTextView = (TextView) findViewById(R.id.result);   
    32.         mImageView = (ImageView) findViewById(R.id.qrcode_bitmap);  
    33.           
    34.         //点击按钮跳转到二维码扫描界面,这里用的是startActivityForResult跳转  
    35.         //扫描完了之后调到该界面  
    36.         Button mButton = (Button) findViewById(R.id.button1);  
    37.         mButton.setOnClickListener(new OnClickListener() {  
    38.               
    39.             @Override  
    40.             public void onClick(View v) {  
    41.                 Intent intent = new Intent();  
    42.                 intent.setClass(MainActivity.this, MipcaActivityCapture.class);  
    43.                 intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);  
    44.                 startActivityForResult(intent, SCANNIN_GREQUEST_CODE);  
    45.             }  
    46.         });  
    47.     }  
    48.       
    49.       
    50.     @Override  
    51.     protected void onActivityResult(int requestCode, int resultCode, Intent data) {  
    52.         super.onActivityResult(requestCode, resultCode, data);  
    53.         switch (requestCode) {  
    54.         case SCANNIN_GREQUEST_CODE:  
    55.             if(resultCode == RESULT_OK){  
    56.                 Bundle bundle = data.getExtras();  
    57.                 //显示扫描到的内容  
    58.                 mTextView.setText(bundle.getString("result"));  
    59.                 //显示  
    60.                 mImageView.setImageBitmap((Bitmap) data.getParcelableExtra("bitmap"));  
    61.             }  
    62.             break;  
    63.         }  
    64.     }     
    65.   
    66. }  


    • 上面的代码还是比较简单,但是要想做出像微信那样只的扫描框,紧紧上面的代码是没有那种效果的,我们必须重写com.mining.app.zxing.view包下面的ViewfinderView类,微信里面的都是用的图片,我是自己画出来的,代码注释的比较清楚,大家直接看代码吧,相信你能理解的,如果你要修改扫描框的大小,去CameraManager类里面修改
    1. /* 
    2.  * Copyright (C) 2008 ZXing authors 
    3.  * 
    4.  * Licensed under the Apache License, Version 2.0 (the "License"); 
    5.  * you may not use this file except in compliance with the License. 
    6.  * You may obtain a copy of the License at 
    7.  * 
    8.  *      http://www.apache.org/licenses/LICENSE-2.0 
    9.  * 
    10.  * Unless required by applicable law or agreed to in writing, software 
    11.  * distributed under the License is distributed on an "AS IS" BASIS, 
    12.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
    13.  * See the License for the specific language governing permissions and 
    14.  * limitations under the License. 
    15.  */  
    16.   
    17. package com.mining.app.zxing.view;  
    18.   
    19. import java.util.Collection;  
    20. import java.util.HashSet;  
    21.   
    22. import android.content.Context;  
    23. import android.content.res.Resources;  
    24. import android.graphics.Bitmap;  
    25. import android.graphics.Canvas;  
    26. import android.graphics.Color;  
    27. import android.graphics.Paint;  
    28. import android.graphics.Rect;  
    29. import android.graphics.Typeface;  
    30. import android.util.AttributeSet;  
    31. import android.view.View;  
    32.   
    33. import com.example.qr_codescan.R;  
    34. import com.google.zxing.ResultPoint;  
    35. import com.mining.app.zxing.camera.CameraManager;  
    36.   
    37. /** 
    38.  * This view is overlaid on top of the camera preview. It adds the viewfinder 
    39.  * rectangle and partial transparency outside it, as well as the laser scanner 
    40.  * animation and result points. 
    41.  *  
    42.  */  
    43. public final class ViewfinderView extends View {  
    44.     private static final String TAG = "log";  
    45.     /** 
    46.      * 刷新界面的时间 
    47.      */  
    48.     private static final long ANIMATION_DELAY = 10L;  
    49.     private static final int OPAQUE = 0xFF;  
    50.   
    51.     /** 
    52.      * 四个绿色边角对应的长度 
    53.      */  
    54.     private int ScreenRate;  
    55.       
    56.     /** 
    57.      * 四个绿色边角对应的宽度 
    58.      */  
    59.     private static final int CORNER_WIDTH = 10;  
    60.     /** 
    61.      * 扫描框中的中间线的宽度 
    62.      */  
    63.     private static final int MIDDLE_LINE_WIDTH = 6;  
    64.       
    65.     /** 
    66.      * 扫描框中的中间线的与扫描框左右的间隙 
    67.      */  
    68.     private static final int MIDDLE_LINE_PADDING = 5;  
    69.       
    70.     /** 
    71.      * 中间那条线每次刷新移动的距离 
    72.      */  
    73.     private static final int SPEEN_DISTANCE = 5;  
    74.       
    75.     /** 
    76.      * 手机的屏幕密度 
    77.      */  
    78.     private static float density;  
    79.     /** 
    80.      * 字体大小 
    81.      */  
    82.     private static final int TEXT_SIZE = 16;  
    83.     /** 
    84.      * 字体距离扫描框下面的距离 
    85.      */  
    86.     private static final int TEXT_PADDING_TOP = 30;  
    87.       
    88.     /** 
    89.      * 画笔对象的引用 
    90.      */  
    91.     private Paint paint;  
    92.       
    93.     /** 
    94.      * 中间滑动线的最顶端位置 
    95.      */  
    96.     private int slideTop;  
    97.       
    98.     /** 
    99.      * 中间滑动线的最底端位置 
    100.      */  
    101.     private int slideBottom;  
    102.       
    103.     private Bitmap resultBitmap;  
    104.     private final int maskColor;  
    105.     private final int resultColor;  
    106.       
    107.     private final int resultPointColor;  
    108.     private Collection<ResultPoint> possibleResultPoints;  
    109.     private Collection<ResultPoint> lastPossibleResultPoints;  
    110.   
    111.     boolean isFirst;  
    112.       
    113.     public ViewfinderView(Context context, AttributeSet attrs) {  
    114.         super(context, attrs);  
    115.           
    116.         density = context.getResources().getDisplayMetrics().density;  
    117.         //将像素转换成dp  
    118.         ScreenRate = (int)(20 * density);  
    119.   
    120.         paint = new Paint();  
    121.         Resources resources = getResources();  
    122.         maskColor = resources.getColor(R.color.viewfinder_mask);  
    123.         resultColor = resources.getColor(R.color.result_view);  
    124.   
    125.         resultPointColor = resources.getColor(R.color.possible_result_points);  
    126.         possibleResultPoints = new HashSet<ResultPoint>(5);  
    127.     }  
    128.   
    129.     @Override  
    130.     public void onDraw(Canvas canvas) {  
    131.         //中间的扫描框,你要修改扫描框的大小,去CameraManager里面修改  
    132.         Rect frame = CameraManager.get().getFramingRect();  
    133.         if (frame == null) {  
    134.             return;  
    135.         }  
    136.           
    137.         //初始化中间线滑动的最上边和最下边  
    138.         if(!isFirst){  
    139.             isFirst = true;  
    140.             slideTop = frame.top;  
    141.             slideBottom = frame.bottom;  
    142.         }  
    143.           
    144.         //获取屏幕的宽和高  
    145.         int width = canvas.getWidth();  
    146.         int height = canvas.getHeight();  
    147.   
    148.         paint.setColor(resultBitmap != null ? resultColor : maskColor);  
    149.           
    150.         //画出扫描框外面的阴影部分,共四个部分,扫描框的上面到屏幕上面,扫描框的下面到屏幕下面  
    151.         //扫描框的左边面到屏幕左边,扫描框的右边到屏幕右边  
    152.         canvas.drawRect(00, width, frame.top, paint);  
    153.         canvas.drawRect(0, frame.top, frame.left, frame.bottom + 1, paint);  
    154.         canvas.drawRect(frame.right + 1, frame.top, width, frame.bottom + 1,  
    155.                 paint);  
    156.         canvas.drawRect(0, frame.bottom + 1, width, height, paint);  
    157.           
    158.           
    159.   
    160.         if (resultBitmap != null) {  
    161.             // Draw the opaque result bitmap over the scanning rectangle  
    162.             paint.setAlpha(OPAQUE);  
    163.             canvas.drawBitmap(resultBitmap, frame.left, frame.top, paint);  
    164.         } else {  
    165.   
    166.             //画扫描框边上的角,总共8个部分  
    167.             paint.setColor(Color.GREEN);  
    168.             canvas.drawRect(frame.left, frame.top, frame.left + ScreenRate,  
    169.                     frame.top + CORNER_WIDTH, paint);  
    170.             canvas.drawRect(frame.left, frame.top, frame.left + CORNER_WIDTH, frame.top  
    171.                     + ScreenRate, paint);  
    172.             canvas.drawRect(frame.right - ScreenRate, frame.top, frame.right,  
    173.                     frame.top + CORNER_WIDTH, paint);  
    174.             canvas.drawRect(frame.right - CORNER_WIDTH, frame.top, frame.right, frame.top  
    175.                     + ScreenRate, paint);  
    176.             canvas.drawRect(frame.left, frame.bottom - CORNER_WIDTH, frame.left  
    177.                     + ScreenRate, frame.bottom, paint);  
    178.             canvas.drawRect(frame.left, frame.bottom - ScreenRate,  
    179.                     frame.left + CORNER_WIDTH, frame.bottom, paint);  
    180.             canvas.drawRect(frame.right - ScreenRate, frame.bottom - CORNER_WIDTH,  
    181.                     frame.right, frame.bottom, paint);  
    182.             canvas.drawRect(frame.right - CORNER_WIDTH, frame.bottom - ScreenRate,  
    183.                     frame.right, frame.bottom, paint);  
    184.   
    185.               
    186.             //绘制中间的线,每次刷新界面,中间的线往下移动SPEEN_DISTANCE  
    187.             slideTop += SPEEN_DISTANCE;  
    188.             if(slideTop >= frame.bottom){  
    189.                 slideTop = frame.top;  
    190.             }  
    191.             canvas.drawRect(frame.left + MIDDLE_LINE_PADDING, slideTop - MIDDLE_LINE_WIDTH/2, frame.right - MIDDLE_LINE_PADDING,slideTop + MIDDLE_LINE_WIDTH/2, paint);  
    192.               
    193.               
    194.             //画扫描框下面的字  
    195.             paint.setColor(Color.WHITE);  
    196.             paint.setTextSize(TEXT_SIZE * density);  
    197.             paint.setAlpha(0x40);  
    198.             paint.setTypeface(Typeface.create("System", Typeface.BOLD));  
    199.             canvas.drawText(getResources().getString(R.string.scan_text), frame.left, (float) (frame.bottom + (float)TEXT_PADDING_TOP *density), paint);  
    200.               
    201.               
    202.   
    203.             Collection<ResultPoint> currentPossible = possibleResultPoints;  
    204.             Collection<ResultPoint> currentLast = lastPossibleResultPoints;  
    205.             if (currentPossible.isEmpty()) {  
    206.                 lastPossibleResultPoints = null;  
    207.             } else {  
    208.                 possibleResultPoints = new HashSet<ResultPoint>(5);  
    209.                 lastPossibleResultPoints = currentPossible;  
    210.                 paint.setAlpha(OPAQUE);  
    211.                 paint.setColor(resultPointColor);  
    212.                 for (ResultPoint point : currentPossible) {  
    213.                     canvas.drawCircle(frame.left + point.getX(), frame.top  
    214.                             + point.getY(), 6.0f, paint);  
    215.                 }  
    216.             }  
    217.             if (currentLast != null) {  
    218.                 paint.setAlpha(OPAQUE / 2);  
    219.                 paint.setColor(resultPointColor);  
    220.                 for (ResultPoint point : currentLast) {  
    221.                     canvas.drawCircle(frame.left + point.getX(), frame.top  
    222.                             + point.getY(), 3.0f, paint);  
    223.                 }  
    224.             }  
    225.   
    226.               
    227.             //只刷新扫描框的内容,其他地方不刷新  
    228.             postInvalidateDelayed(ANIMATION_DELAY, frame.left, frame.top,  
    229.                     frame.right, frame.bottom);  
    230.               
    231.         }  
    232.     }  
    233.   
    234.     public void drawViewfinder() {  
    235.         resultBitmap = null;  
    236.         invalidate();  
    237.     }  
    238.   
    239.     /** 
    240.      * Draw a bitmap with the result points highlighted instead of the live 
    241.      * scanning display. 
    242.      *  
    243.      * @param barcode 
    244.      *            An image of the decoded barcode. 
    245.      */  
    246.     public void drawResultBitmap(Bitmap barcode) {  
    247.         resultBitmap = barcode;  
    248.         invalidate();  
    249.     }  
    250.   
    251.     public void addPossibleResultPoint(ResultPoint point) {  
    252.         possibleResultPoints.add(point);  
    253.     }  
    254.   
    255. }  

    上面的代码中,中间那根线微信是用的图片,我这里是画的,如果你想更加仿真点就将下面的代码

    1. canvas.drawRect(frame.left + MIDDLE_LINE_PADDING, slideTop - MIDDLE_LINE_WIDTH/2, frame.right - MIDDLE_LINE_PADDING,slideTop + MIDDLE_LINE_WIDTH/2, paint);  

    改成

    1. Rect lineRect = new Rect();  
    2.             lineRect.left = frame.left;  
    3.             lineRect.right = frame.right;  
    4.             lineRect.top = slideTop;  
    5.             lineRect.bottom = slideTop + 18;  
    6.             canvas.drawBitmap(((BitmapDrawable)(getResources().getDrawable(R.drawable.qrcode_scan_line))).getBitmap(), null, lineRect, paint);  

    那条扫描线自己去微信里面找一下,我贴出来的失真了,下载微信apk,将后缀名改成zip,然后解压就行了

    画扫描框下面字体的代码需要修改下,这样子能根据字体自动排列在中间,如果字太长我没有处理,那个要自动换行,你可以自行处理

    1. paint.setColor(Color.WHITE);    
    2. paint.setTextSize(TEXT_SIZE * density);    
    3. paint.setAlpha(0x40);    
    4. paint.setTypeface(Typeface.DEFAULT_BOLD);   
    5. String text = getResources().getString(R.string.R.string.scan_text);  
    6. float textWidth = paint.measureText(text);  
    7.   
    8. canvas.drawText(text, (width - textWidth)/2, (float) (frame.bottom + (float)TEXT_PADDING_TOP *density), paint)  

    运行界面截图,其中中间的那根绿色的线会上下移动,跟微信的效果差不多,当然运行你还需要相对应的权限问题,有兴趣的朋友可以去下载demo



    从8点多写这篇博客写到现在,看起来这么点字,但实际上还是比较耗时间的,如果你觉得这篇文章对你有帮助,你就顶一下,哈哈,洗澡睡觉去了,上面的项目中还有一些资源文件我没有贴出来,想要看效果可以下载源码


    我在Android 基于google Zxing实现对手机中的二维码进行扫描这篇文章中实现了对手机中二维码照片的扫描,并且替换了中间的扫描线,和微信效果更加相似


    以上是参考文章。接下来我们来实现扫码生成仿微信名片表单


    生成表单正文

    以上就实现了生成并扫码功能了,接下来,我们来看看生成表单。

    首先,在生成二维码的时候,我们需要设置属于自己的字符串开头标识,用来扫码时判断属于我们内部的名片格式,可以生成我们的表单。

    具体代码如下

    /**
    	 * 生成二维码 要转换的地址或字符串,可以是中文
    	 * 
    	 * /**
    		 * 拆分扫描得到的字符串str acbee&开头为本公司的二维码 格式: name:Aleck_ age:22 work:小蜜蜂
    		 * tel:13655555555
    		 * remark:好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。 str=
    		 * "Aleck_&&22&&小蜜蜂&&13655555555&&好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。"
    		 */
    	 /** 
    	 * @param url
    	 * @param width
    	 * @param height
    	 * @return
    	 */
    	public Bitmap createQRImage(String url, final int width, final int height) {
    		try {
    			// 判断URL合法性
    			if (url == null || "".equals(url) || url.length() < 1) {
    				return null;
    			}
    			Hashtable<EncodeHintType, String> hints = new Hashtable<EncodeHintType, String>();
    			hints.put(EncodeHintType.CHARACTER_SET, "utf-8");
    			// 图像数据转换,使用了矩阵转换
    			BitMatrix bitMatrix = new QRCodeWriter().encode(url,
    					BarcodeFormat.QR_CODE, width, height, hints);
    			int[] pixels = new int[width * height];
    			// 下面这里按照二维码的算法,逐个生成二维码的图片,
    			// 两个for循环是图片横列扫描的结果
    			for (int y = 0; y < height; y++) {
    				for (int x = 0; x < width; x++) {
    					if (bitMatrix.get(x, y)) {
    						pixels[y * width + x] = 0xff000000;
    					} else {
    						pixels[y * width + x] = 0xffffffff;
    					}
    				}
    			}
    			// 生成二维码图片的格式,使用ARGB_8888
    			Bitmap bitmap = Bitmap.createBitmap(width, height,
    					Bitmap.Config.ARGB_8888);
    			bitmap.setPixels(pixels, 0, width, 0, 0, width, height);
    			return bitmap;
    		} catch (WriterException e) {
    			e.printStackTrace();
    		}
    		return null;
    	}
    

    此方法将带有我们的标识的固定格式的字符串生成唯一的二维码,接下类我们来看看扫码读取字符串并生成表单代码

    // private String titleData[][] = new String[][] {
    	// { "ID", "姓名", "EMAIL", "地址" },
    	// { "01", "小李", "xiaoli",
    	// "北京" },
    	// { "02", "小张", "xiaozhang", "天津" } }; // 定义要显示的数据
    	//
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		// TODO Auto-generated method stub
    		super.onCreate(savedInstanceState);
    
    		super.onCreate(savedInstanceState);
    		// 不显示标题
    		requestWindowFeature(Window.FEATURE_NO_TITLE);
    
    		// Window window = getWindow();
    		// window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
    		setContentView(R.layout.scan_result);
    
    		// tex_result=(TextView)findViewById(R.id.txt_result);
    		btn_back = (Button) findViewById(R.id.button_back);
    		txt_name = (TextView) findViewById(R.id.txt_name);
    		txt_age = (TextView) findViewById(R.id.txt_age);
    		txt_work = (TextView) findViewById(R.id.txt_work);
    		txt_tel = (TextView) findViewById(R.id.txt_tel);
    		//txt_remark = (TextView) findViewById(R.id.txt_email);
    
    		// 返回按钮事件
    		btn_back.setOnClickListener(new OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				finish();
    
    			}
    		});
    
    		Intent intent = getIntent(); // 获取Intent对象
    
    		Bundle bundle = intent.getExtras(); // 获取传递的数据包
    		str = bundle.getString("result");
    
    		/**
    		 * 拆分扫描得到的字符串str acbee&开头为本公司的二维码 格式: name:彭伟桃 age:22 work:小蜜蜂
    		 * tel:13655555555
    		 * remark:好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。 str=
    		 * "Aleck_&&22&&小蜜蜂&&13655555555&&好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。"
    		 */
    		String[] temp = null;
    		temp = str.split("&&");
    		if (temp[0].equals("acbee") ) { // 判断为本软件生成的二维码,acbee为标识前缀
    			txt_name.setText(temp[1]);
    			txt_age.setText(temp[2]);
    			txt_work.setText(temp[3]);
    			txt_tel.setText(temp[4]);
    			//txt_remark.setText(temp[5]);
    
    		}
    
    		// etShow.setText(temp[0] + " linc " + temp[1]);
    
    		// tex_result.setText(str);
    
    		// /**
    		// * 动态生成表格行
    		// */
    		// TableLayout layout = new TableLayout(this); // 定义表格布局
    		// TableLayout.LayoutParams layoutParam = new TableLayout.LayoutParams(
    		// ViewGroup.LayoutParams.FILL_PARENT,
    		// ViewGroup.LayoutParams.FILL_PARENT); // 定义布局管理器的参数
    		// //layout.setBackgroundResource(R.drawable.mldn_logo); // 定义背景图片
    		// for (int x = 0; x < this.titleData.length; x++) { // 循环设置表格行
    		// TableRow row = new TableRow(this); // 定义表格行
    		// for (int y = 0; y < this.titleData[x].length; y++) {
    		// TextView text = new TextView(this);
    		// text.setText(this.titleData[x][y]); // 设置文本内容
    		// row.addView(text, y); // 加入一个编号
    		// }
    		// layout.addView(row); // 向表格之中增加若干个表格行
    		// }
    		// super.setContentView(layout, layoutParam); // 设置显示
    
    	}
    

    代码比较简单,大家使用时可以自行封装,这里使用静态的表单格式。


    再看看布局文件吧,也很简单


    <?xml version="1.0" encoding="UTF-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" 
        android:background="#ffffff" >
    
        <RelativeLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/mmtitle_bg_alpha" >
    
        <Button
            android:id="@+id/button_back"
            android:layout_width="75.0dip"
            android:text="返回"
            android:background="@drawable/mm_title_back_btn"
            android:textColor="@android:color/white"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="2dip" />
    
        <TextView
            android:id="@+id/textview_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/button_back"
            android:layout_alignBottom="@+id/button_back"
            android:layout_centerHorizontal="true"
            android:gravity="center_vertical"
            android:text="扫描结果"
            android:textColor="@android:color/white"
            android:textSize="18sp" />
    
    </RelativeLayout>
    
        
    
        
    
    <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"  
            android:gravity="left"
            >
     
            <TableRow
                android:id="@+id/tableRow1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 >
            
            <TextView
                android:id="@+id/TextView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="姓名"
                android:textSize="16sp"
    			android:width="70dp"
    
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                 />
            <TextView
                android:id="@+id/txt_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:textSize="18sp"
                android:text=""
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                 >
            </TextView>
            
            </TableRow>
            
            <TableRow
                android:id="@+id/tableRow1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 >
            
            <TextView
                android:id="@+id/TextView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="年龄"
                android:textSize="16sp"
                android:width="70dp"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                 />
            <TextView
                android:id="@+id/txt_age"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:textSize="18sp"
                android:text=""
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                 >
            </TextView>
            
            </TableRow>
            
            
            <TableRow
                android:id="@+id/tableRow2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >
            
            <TextView
                android:id="@+id/TextView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="工作单位"
                android:textSize="16sp"
                
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
               
                 />
            <TextView
                android:id="@+id/txt_work"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:textSize="18sp"
                android:text=""
                
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                
                 >
            </TextView>
            
            </TableRow>
            
            <TableRow
                android:id="@+id/tableRow3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 >
            
            <TextView
                android:id="@+id/TextView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="电话"
                android:textSize="16sp"
                android:width="70dp"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                 />
            <TextView
                android:id="@+id/txt_tel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:textSize="18sp"
                android:text=""
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                 >
            </TextView>
            
            </TableRow>
        </TableLayout>
    
    </LinearLayout>

    以上就可以实现仿微信扫描二维码生成用户信息的表单了,接下来展示一下效果页面

               

                                                  首页                                                                                                                            扫描页


              

                                              生成二维码                                                                                                                     生成表单结果(大家可以自行添加更丰富内容)



    这里只显示了名字电话等信息,大家可以自行添加头像图片等,这只是一个小的Demo实例。接下来奉上源码,代码注释详细,简介易懂。



    项目源码,点击下载

    展开全文
  • 恒佑科技推出的条码软件Label mx具有制作中国移动、联通、meCard、vCard四种电子名片的功能,支持各种智能手机的识别且完美支持中文,下面就简单介绍一下: 1.启动Label mx,新建标签文件,尺寸不做特殊要求、容下...
  • python-微信二维码制作前言:      更多关于Python的知识请加关注哟~~。若需联系博主请私信或者加博主联系方式:      QQ:1542334210     &...
  • 绿色软件、可编辑LOGO ,名片支持微信、我查查扫描到电话薄中
  • Java生成二维码名片

    热门讨论 2014-01-24 14:08:04
    生成后的二维码,用360的扫一扫或者微信的扫一扫后,自动形成一个用户的名片身份, 可以直接保存到手机通讯录中, 非常方便。 包含的名片信息: 姓名+手机+电话+邮箱+网址+公司+地址。
  • educode实训平台—二维码名片制作 第1关:二维码名片页面的结构设计 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设计师名片</title> </head&...
  • 仿微信二维码制作,二维码扫码读取名片信息
  • 功能:根据数据库查出个人数据,生成个人名片名片中有个人二维码,微信扫描二维码可快速保存联系人信息到手机通讯录。 vue中引入html2canvas实现将整块dom进行图片化 引包 npm install --save html2canvas &...
  • 二维码电子名片制作

    2021-05-10 17:01:11
    提示:如果希望名片上的二维码能够被手机等智能设备识别,方便手机及微信扫码直接保存联系人姓名、电话、住址、职务等信息这篇文章就很适合你。 提示:以下是本篇文章正文内容,下面案例可供参考 一、vcard协议个人...
  • C# 二维码名片

    热门讨论 2016-03-25 21:55:00
    演示如何创建一个二维码名片工具,内容涉及图片操作、 二维码类库、电子名片、带 Logo 的二维码等知识点。
  • php 生成电话名片二维码

    万次阅读 2016-05-04 13:28:20
    今天有个需求做一个php制作二维码名片的功能,网上找了一堆,都是直接访问url,感觉与需求不符,恶补了下知识,发现可以通过一种规范定义电子名片的格式去实现这样的功能,貌似很多网站生成二维码都是这样实现的,...
  • 二维码名片制作

    2019-03-16 19:34:25
    概念了解:vCard:它是一种用于定义电子名片的标准或这规范。常见的,我们的手机通讯录,可以到处为vCard格式。 /// &lt;summary&gt; /// 名片数据类 /// &lt;/summary&gt; public class ...
  • 仿微信二维码制作,二维码扫码读取名片信息.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
  • 随处可见的QR Code 出现在各种海报,车票,个人名片、产品、衣服,网站上,由于二维码的发展,网络上也就应运而生了许多二维码在线生成网站以及二维码生成软件,今天大眼仔就给大家分享比较好用的二维码制作软件。...
  • 二维码是用某种特定的几何图形按一定规律在二维方向上分布的黑白相间的图形记录数据符号信息的;在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念,使用若干个与二进制相对应的几何形体来...
  • 第1关:二维码名片页面的结构设计 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设计师名片</title> </head> <body> <!-- *****...
  • C# 生成二维码名片 实例源码
  • qq群二维码名片怎么制作.docx
  • php二维码与电子名片

    千次阅读 2017-08-17 14:46:52
    生成二维码php可以使用phpqrcode这个库来很方便的生成二维码。phpqrcode: 下载地址然后将phpqrcode源码放到你的项目中,include... ...然后直接访问这个php文件,就能在浏览器上打印出一个二维码。如果不想直接显示二维码
  • 在去年的一篇文章中,我们曾经介绍过如何自己制作属于自己的二维码(用python一行代码实现动态二维码自制)。在这篇文章中,我们采用的是Python的MyQR模块,通过利用该模块中所包含的myqr包的run函数,可以利用一行...
  • Java生成名片式的二维码源码分享

    万次阅读 多人点赞 2017-08-17 22:33:03
    “Java生成名片式(带有背景图片、用户网络头像、用户名称的二维码图片)的二维码源码分享”
  • python二维码制作

    2020-01-17 23:03:26
    二维码 导入MyQR库: pip install -i https://pypi.tuna.tsinghua.edu.cn/simple MyQR from MyQR import myqr myqr.run(words="https://blog.csdn.net/qq_40844663", picture = '1.gif', #背景图 colorized = ...
  • 首先先给大家看下制作二维码效果吧 这个是普通的微信二维码: 普普通通没啥特别?如果你的微信二维码是下面的这种呢? 还可以支持gif动图哦 上面都是作者的个人微信,不信的话扫一下都可以添加我的个人...
  • 有人通过制作个性二维码致富,今天社长凯先生就要对不住啦(不是抢饭碗,是打破饭碗~)公开这种赚钱方法的所有具体操作方法~手把手教你(嘴对嘴超超超...详细教学~) 图中各种个性二维码制作,其实方法非常简单...

空空如也

空空如也

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

名片二维码制作