精华内容
下载资源
问答
  • 此代码适用于微信SDKVersion"2.9.0 "或以上,以制作半圆形拖动条为例,制作简单的自定义组件的方法流程: wxml界面配置 在页面里放置一个画布组件 <canvas style="width:300rpx;height:300rpx;position:...

    此代码适用于微信SDKVersion"2.9.0 "或以上,以制作半圆形拖动条为例,制作简单的自定义组件的方法流程:

    wxml界面配置

    在页面里放置一个画布组件
    
        <canvas style="width:300rpx;height:300rpx;position:absolute;left:50rpx;text-align: center;line-height: 300rpx;"
         canvas-id="myCanvas" 
         type="2d" 
         id="myCanvas" 
         bindtouchstart="touchstart" 
         bindtouchmove="touchmove" 
         bindtouchend="touchend" 
         bindtouchcancel="touchcancel">
         {{progress}}
         </canvas>
    	
    

    JS部分代码

    全局数据
    
    /**
      * 页面的初始数据
      */
    data: {
    	isStart: false,
        startprogress: 0,
     	progress: 0,
     	halfofcanvas,
     	isFirst:true
    }
    
    触摸监听部分代码
    
    /**
     * 点击瞬间触发
     */
    touchstart: function (e) {
       if (e.changedTouches[0].y <= that.data.halfofcanvas) {
         var touchx = Math.abs(e.changedTouches[0].x - this.data.halfofcanvas)
         var touchy = this.data.halfofcanvas - e.changedTouches[0].y
         var touchr = Math.sqrt((touchx * touchx) + (touchy * touchy))
         if (touchr >= this.data.halfofcanvas*0.35 && touchr <= this.data.halfofcanvas) {
           this.data.startprogress = this.data.progress;
           this.data.isStart = true;
         }
       }
     },
    /**
     *拖动监听
     */
    touchmove: function (e) {
      if (this.data.isStart) {
        this.changeProgress(e.changedTouches[0].x, e.changedTouches[0].y)
      }
      this.drawCanvas()
    },
    /**
     *松手监听
     */
    touchend: function (e) {
      if (this.data.isStart) {
        this.changeProgress(e.changedTouches[0].x, e.changedTouches[0].y)
        this.data.isStart = false;
      }
      this.drawCanvas()
    },
    /**
     *触摸事件被打断
     */
    touchcancel: function (e) {
    //根据需求是否复位拖条
      // if (this.data.isStart) {
      //   this.data.isStart = false;
      //   this.data.progress = that.data.startprogress
      // }
    },
    /**
     *百分比进度计算
     */
    changeProgress(x, y) {
    	//计算角度
        const angle = Math.atan((this.data.halfofcanvas - y) / (x - this.data.halfofcanvas)) / Math.PI;
        if (y <= this.data.halfofcanvas) {
          if (x < this.data.halfofcanvas) {
            this.data.progress = ((-1 * angle) * 100).toFixed(0);
          } else {
            this.data.progress = ((1 - angle) * 100).toFixed(0);
          }
        } else {
          if (x < this.data.halfofcanvas) {
            this.data.progress = (angle* 100).toFixed(0);
          } else {
            this.data.progress = ((1 + angle) * 100).toFixed(0);
          }
        }
    }
    

    以下是绘制部分代码

    drawCanvas: function () {
     var that = this;
        const query = wx.createSelectorQuery();
        query.select('#strengthCanvas').fields({
            node: true,
            size: true
          }).exec((res) => {
            const canvas = res[0].node
            const ctx = canvas.getContext('2d')
            const dpr = wx.getSystemInfoSync().pixelRatio
            canvas.width = res[0].width * dpr
            canvas.height = res[0].height * dpr
            
            if(!that.data.isFirst){
              //第一次绘制先确定圆心位置
              that.data.halfofcanvas = canvas.width/2
              that.data.hasscale = true
            }else{
    	       //清空画布,用于重绘时
    	       ctx.clearRect(0, 0, canvas.width, canvas.width)
            }
            
            const pro = that.data.progress * 0.01;
       		//画笔宽度
            ctx.lineWidth = canvas.width/40;
            ctx.beginPath()
            //画布中心画80%画布大小的圆弧
            //1代表以9点钟方向为起点,可以根据需求调整
            ctx.arc(that.data.halfofcanvas, that.data.halfofcanvas, that.data.halfofcanvas*0.8, 1 * Math.PI, (1 + pro) * Math.PI)
          })
    }
    

    新手上路笔记,老司机们有更简便的方式欢迎评论指导

    展开全文
  • # 今天项目中有一个要求,就是做一个自定义的半圆拖动进度条,![图片说明](https://img-ask.csdn.net/upload/201508/07/1438918573_10945.png) 效果图像这样, 上面的进度条 背景色渐变 中间白色 两变其他颜色 。...
  • 这个是在公司项目中准备使用的一个控件,本准备直接在网上搜一个用,可惜找到的很多都是 ProgressBar,并不具备拖拽功能,于是自己动手实现了一个,其功能和特性均仿照 SeekBar 进行设计。 效果预览 支持的特性 [x...
  • android可拖动,展示菜单,能自动吸边和隐藏的悬浮球
  • 参考别的哥们的一个demo,在上面整改出的支持点击和拖拽事件区分.
  • JQuery实现可拖动层,拖动时有透明效果,
  • 这是一款jquery透明拖拽窗口插件。该插件可以在页面生成可以拖拽、最大化、最小化的浮动窗口。使用方法在页面中引入style.css、jquery和jquery-translucent.js文件。初始化插件在页面DOM元素加载完毕之后,通过...

    这是一款jquery半透明拖拽窗口插件。该插件可以在页面生成可以拖拽、最大化、最小化的浮动窗口。

    使用方法

    在页面中引入style.css、jquery和jquery-translucent.js文件。

    初始化插件

    在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery半透明拖拽窗口插件。

    $("body").translucent();

    可以通过参数改变弹窗样式位置等。

    $("body").translucent({

    width:1000,

    textHtml:"

    这是一个新建的弹窗!
    ",

    titleText:"弹窗标题内容"

    });

    配置参数

    该jquery半透明拖拽窗口插件可用的配置参数有:

    width:500, //默认宽度

    height:500, //默认高度

    drag:true, //启动拖拽

    opacity:0.8, //透明度

    border:"1px solid #ddd",

    borderRadius:8,

    backgroundColor:"rgb(225, 225, 225)",//默认背景色

    titleHeight:"40px",//title高度

    titleGroundColor:"#999",//title默认背景色

    shadow:true,//开启阴影

    positionTop:100,//默认定位位置

    positionLeft:100,

    titleText:"新建弹窗",//标题文本

    titleFontSize:12,

    titleFontColor:"#000",

    titleFontFamily:"微软雅黑",

    textHtml:"

    这是一个新建的弹窗!

    ",

    titleTextCenter:false,

    close:null //关闭窗口回调函数,传出参数当前弹窗的jquery dom节点,

    zIndex:10

    展开全文
  • Android自定义半圆进度条 半圆渐变色进度条带指示 半圆开口大小可自由修改首先我们来看下效果图不同的开口大小只需要修改一个参数即可半圆1:半圆2:半圆3:如果是你想要的效果,就直接滑动到文章底部,下载源码,...

    Android自定义半圆进度条 半圆渐变色进度条带指示 半圆开口大小可自由修改

    首先我们来看下效果图

    不同的开口大小只需要修改一个参数即可

    半圆1:

    dfbb8f5978302d7fac5c459a2fb0fb75.png

    半圆2:

    03558ec2abe086cfee07ac43aaefff89.png

    半圆3:

    cb15002b0475e117f5f6b05bace45f00.png

    如果是你想要的效果,就直接滑动到文章底部,下载源码,然后结合本文章操作说明集成到自己的项目中吧

    如果集成

    第一步:

    下载项目解压,然后用as打开。

    第二步:

    复制SemicircleProgressBar这个类到自己的项目中

    第三步:

    在需要显示的布局中,直接使用自定义控件,如下:

    android:id="@+id/progressbar"

    android:layout_width="match_parent"

    android:layout_height="200dp"

    android:layout_centerInParent="true"

    android:background="@color/white" />

    具体操作见下图,复制自定义控件的完整路径,然后在xml布局文件中直接引用

    e8b29392dc22152d6351609f949fc190.png

    第四步:在对应布局的类里面,声明控件,然后给控件通过setProgress方法,设置进度即可

    package com.ecaray.semicircleprogressbar;

    import android.os.Bundle;

    import android.support.v7.app.AppCompatActivity;

    import android.view.View;

    import android.widget.Button;

    import android.widget.TextView;

    /**

    * 类描述: 自定义半圆进度条

    * 创建人: 简雨山舍

    * 创建时间: 2018/1/8 11:58

    * 修改人: 简雨山舍

    * 修改时间: 2018/1/8 11:58

    */

    public class MainActivity extends AppCompatActivity {

    SemicircleProgressBar percentView;//自定义控件声明

    TextView tvProgress;//显示进度的文本

    Button btAdd;//加按钮

    Button btSubstract;//减按钮

    private int progress = 80;//初始进度

    @Override

    protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    percentView = findViewById(R.id.progressbar);

    tvProgress = findViewById(R.id.tv_progress);

    percentView.setProgress(progress);//初始化进度

    tvProgress.setText(progress + "%");//初始化进度文本显示

    btAdd = findViewById(R.id.bt_add);

    btSubstract = findViewById(R.id.bt_subtract);

    btAdd.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View view) {

    progress += 1;//进度每次加1

    if (progress > 99) {//大于99则等于100

    progress = 100;

    }

    percentView.setProgress(progress);//设置进度条显示进度

    tvProgress.setText(progress + "%");//设置文本显示进度数字

    }

    });

    btSubstract.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View view) {

    progress -= 1;//进度每次减1

    if (progress < 0) {//小于0则等于0

    progress = 0;

    }

    percentView.setProgress(progress);//设置进度条显示进度

    tvProgress.setText(progress + "%");//设置文本显示进度数字

    }

    });

    }

    }

    以上,就完成了集成工作,可以跑下程序,看看效果了。

    如果需要改变半圆进度条的开口大小,也非常的简单,只需要修改一个参数即可

    第一步:

    打开SemicircleProgressBar该类,在声明变量中找到

    /**

    * 两条圆弧的起始角度

    * 起始角度控制半圆开口的大小,数值越小开口越大,数值越大开口越小

    */

    private double floatAngel = 50;

    第二步:

    修改他的数值即可

    其他的想修改的效果,代码中都有备注,直接修改对应的值看效果即可。

    重点内容

    最后附上源码下载链接:

    http://download..net/download/beibaokongming/10194333

    展开全文
  • 接到项目,需要做一个可拖动的彩虹进度条(可拖动的多弧线进度条),直接上图。 思路:1.参考了https://blog.csdn.net/oQinYou/article/details/79131468?utm_source=blogxgwz8, 2.这个demo是一个可拖动的圆,...

    接到项目,需要做一个可拖动的彩虹进度条(可拖动的多弧线进度条),直接上图。

    思路:1.参考了https://blog.csdn.net/oQinYou/article/details/79131468?utm_source=blogxgwz8

    2.这个demo是一个可拖动的圆,但是画圆弧只需要画四分之一就行了,方法是

    canvas.drawArc(mOval, 180, 90, false, mCirqueBgPaint);,背景弧线和可拖动圆弧线都是这样的

    3.画第二条弧线只需要把画笔的坐标调整下,x,y增加20.f的距离就行了。

    4。其他思路还是详见代码吧。

    源码地址:https://download.csdn.net/download/xiao_ning_123/11168328

     

    2019-06-25彩虹条进一步更新,修改了滑动不够流畅,点击按钮可以变化粗细的问题,自定义控件内部还增加了自动刷新。以下地址是新代码地址(仅上传了自定义控件部分):https://download.csdn.net/download/xiao_ning_123/11258122

    备注:MainActivity中增加   cirque_progress1.setLine(3); cirque_progress1.invalidate();可以完成按钮点击时画笔粗细变化。

     

    代码中可能有bug,请多多指教,欢迎在下方留言。

     

    展开全文
  • MFC实现的拖动时图标变成透明的副本,仿照Win7拖动图标时的样式。代码简单,但愿能起到抛砖引玉的作用。
  • 本文讲解的是一个实现了可拖拽的悬浮按钮,并为此添加了类似于qq的吸附边框的功能。在此之前,先了解下其简单的使用方式吧: 首先你得添加其依赖 compile 'com.android.support:design:25.3.1' 然后在布局文件中...
  • 今天我们要分享一款可以拖拽的小窗口程序,这个窗口特效是利用jQuery UI和CSS3制作而成的,窗口是透明的,可以用鼠标拖拽,配合大气的山水背景图,显得非常壮观。拖拽功能是jQuery实现的,另外窗口的透明外观,...
  • 本篇文章主要介绍了canvas实现弧形可拖动进度条的实例方法,具有很好的参考价值。下面跟着小编一起来看下吧
  • 悬浮窗口(透明+拖拽) 功能。 Delphi7版本。
  • Android 拖拽悬浮按钮

    2016-12-13 17:46:11
    Android 拖拽悬浮按钮
  • 在一个窗口上添加一个浮动的透明树形编辑框,并且可以拖动这个这个树形编辑框,双击透明界面关闭,先看效果: 2.自定义一个树形控件 #pragma once #include <QTreeWidget> #include <QPoint> //...
  •  鼠标点击控件(自绘控件,可继承任意控件类,下文将给出示例),并且进行拖拽,会有一个透明黑色阴影来表示当前拖动的位置。当松开鼠标,控件重新绘制在鼠标松开的位置。拖拽功能的实现代码主要在DoEvent函数和...
  • winform在pictureBox控件上绘制矩形框,鼠标点击可拖拽,伸缩
  • 模仿QQ聊天中的图片查看器 1.支持鼠标缩放图片; 2.图片放大到大于查看器窗体时,可鼠标拖动查看局部放大图片; 3.双层窗体实现查看器透明,图片不透明效果
  • 安卓开发可以拖拽拖拽后自动吸附到手机屏幕边的自定义view(已更新之前的有问题)
  • 效果不错的js写法,需要jquery-1.11.0.min.js插件,窗口可以调整大小。
  • 解决办法:清理一下鼠标下部激光感应的地方,还不行就得换一个试试了。
  • bounce属性改成none就可以了 单页面配置 在pages.json中配置如下 { "path": "pages/wareHouseOrder/wareHouseOrder", "style": { "navigationBarTitleText": "认种认养订单", ...
  • Flutter任意拖动的悬浮按钮,可以更改参数设定边界范围, 内包含多个Demo 仓库地址 https://github.com/ihongka/FlutterDIY
  • 天气预报软件,winform无边框实现拖动透明效果
  • QListView实现自定义拖拽拖拽即选中),让你摆脱传统难看的拖拽样式!含效果图。
  • 在开发前需要知道,h5拖拽api(drag/drop)基本只支持pc端(但是,我在实际开发中,发现很多安卓手机也支持这个api, ios端不支持),因此我们如果使用拖拽api,需要做移动端的兼容。如果完全自...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,324
精华内容 10,129
关键字:

半拖拽