微信小程序——定位

最新推荐文章于 2024-08-22 16:23:34 发布

零小星

最新推荐文章于 2024-08-22 16:23:34 发布

阅读量356

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_43773083/article/details/106494809

本文介绍了如何在微信小程序中实现手指触摸屏幕进行图片的缩放功能，详细讲解了wxml、js、wxss和json文件中的关键代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

借鉴：微信小程序中实现手指缩放图片

wxml

<mynav title="定位" />
<view class="page">
	<view class="touch-container">
		<image class="img" src="{
   
   {src}}" style="width: {
   
   {width}}rpx; height: {
   
   {height}}rpx; left: {
   
   {left}}rpx; top: {
   
   {top}}rpx; transform: translate(-50%, -50%) scale({
   
   { scale }}) rotate({
   
   { rotate }}deg);" bindload="bindload" catchtouchstart="touchstart" catchtouchmove="touchmove" catchtouchend="touchend"></image>
	</view>
	<view class="button">
		<view class="btn" bindtap="add">+</view>
		<view class="btn" bindtap="cut">-</view>
	</view>
</view>

js

var canOnePointMove = false
var onePoint = {
   
   
  x: 0,
  y: 0
}
var twoPoint = {
   
   
  x1: 0,
  y1: 0,
  x2: 0,
  y2: 0
}

Page({
   
   
  data: {
   
   
    msg: '',
    src: '/images/icons/7f55677d60d2b8ce452f55715c03dd8.png',
    width: 0,
    height: 0,
    left: 375,
    top: 600,
    scale: 1,
    rotate: 0
  },
  // 关闭上拉加载
  onReachBottom: function () {
   
   
    return
  },
  bindload: function (e)