由于画布需要缩小到30%,导致旋转角度出现问题,有高人给看看指点一下,多谢多谢。
<!--wxml -->
<view style="width:414px;height:500px;position: absolute;" bindtap="cancel">
<view id="test" style="background-color:#1ea5c7;width: {{1080}}px;height: {{1080}}px;position: relative;transform: scale({{0.3}});transform-origin:center;left:50%;margin-left:-{{540}}px;top:50%;margin-top: -{{540}}px;" catchtap="">
<view class='contentWarp'>
<block wx:for="{{itemList}}" wx:key="index">
<view class='touchWrap' style='transform: scale({{item.scale}});top:{{item.top}}px;left:{{item.left}}px; z-index:{{item.active?100:1}}'>
<view class='imgWrap {{item.active? "touchActive":""}}' style="transform: rotate({{item.angle}}deg); border: {{item.active?0*item.oScale:0}}rpx #fff dashed;">
<image src='{{item.image}}' data-id='{{item.id}}' style='width:{{item.width}}px;height:{{item.height}}px;' bindtouchstart='WraptouchStart' bindtouchmove='WraptouchMove' bindtouchend='WraptouchEnd'></image>
<image class='o' src='../../images/o.png' style='transform: scale({{item.oScale}});transform-origin:center;' data-id='{{item.id}}' bindtouchstart='oTouchStart' bindtouchmove='oTouchMove' bindtouchend='WraptouchEnd'></image>
</view>
</view>
</block>
</view>
</view>
</view>
let index = 0,
items = [],
flag = true,
itemId = 1;
Page({
data: {
itemList: [],
},
onLoad: function (options) {
items = this.data.itemList;
this.setDropItem({
url: '/images/2.png'
});
},
// 初始化数据
setDropItem(imgData) {
let data = {}
wx.getImageInfo({
src: imgData.url,
success: res => {
data.width = res.width; //宽度
data.height = res.height; //高度
data.image = imgData.url; //地址
data.id = ++itemId; //id
data.top = 300; //top定位
data.left =300; //left定位
//圆心坐标
// data.x=0;
// data.y=0;
data.x = data.left + data.width / 2;
data.y = data.top + data.height / 2;
data.scale = 1; //scale缩放
data.oScale = 1; //方向缩放
data.rotate = 0; //旋转角度
data.active = true; //选中状态
items[items.length] = data;
this.setData({
itemList: items
})
}
})
},
// 放大旋转初始
oTouchStart(e) {
//找到点击的那个图片对象,并记录
//获取作为移动前角度的坐标
items[index].tx = e.touches[0].clientX;
items[index].ty = e.touches[0].clientY;
//移动前的角度
items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)
//获取图片半径
},
// 放大旋转移动
oTouchMove: function (e) {
//记录移动后的位置
items[index]._tx = e.touches[0].clientX;
items[index]._ty = e.touches[0].clientY;
//移动后位置的角度
items[index].angleNext = this.countDeg(items[index].x, items[index].y, items[index]._tx, items[index]._ty)
//角度差
items[index].new_rotate = items[index].angleNext - items[index].anglePre;
//叠加的角度差
items[index].rotate += items[index].new_rotate;
items[index].angle = items[index].rotate; //赋值
//用过移动后的坐标赋值为移动前坐标
items[index].tx = e.touches[0].clientX;
items[index].ty = e.touches[0].clientY;
items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)
console.log(items[index].anglePre)
//赋值setData渲染
this.setData({
itemList: items
})
},
/*
*参数1和2为图片圆心坐标
*参数3和4为手点击的坐标
*返回值为手点击的坐标到圆心的角度
*/
countDeg: function (cx, cy, pointer_x, pointer_y) {
var ox = pointer_x - cx;
var oy = pointer_y - cy;
var to = Math.abs(ox / oy);
var angle = Math.atan(to) / (2 * Math.PI) * 360;
// console.log("ox.oy:", ox, oy)
if (ox < 0 && oy < 0) //相对在左上角,第四象限,js中坐标系是从左上角开始的,这里的象限是正常坐标系
{
angle = -angle;
} else if (ox <= 0 && oy >= 0) //左下角,3象限
{
angle = -(180 - angle)
} else if (ox > 0 && oy < 0) //右上角,1象限
{
angle = angle;
} else if (ox > 0 && oy > 0) //右下角,2象限
{
angle = 180 - angle;
}
return angle;
}
})
![](https://profile-avatar.csdnimg.cn/57b38e92d2074b6b904f95f4237b6e8f_weixin_43784823.jpg!4)
小程序由于画布需要缩小到30%,导致旋转角度出现问题,js不精通,请给看一下。
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
关注
不知道你这个问题是否已经解决, 如果还没有解决的话:- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7493018
- 我还给你找了一篇非常好的博客,你可以看看是否有帮助,链接:JS菜鸟问题 获取个位,十位,百位,千位,上的数值(注:分清%与/的区别)
- 除此之外, 这篇博客: 10个常用的JS工具库,80%的项目都在用中的 基本用法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
import dayjs from 'dayjs' dayjs(d).format('YYYY-MM-DD HH:mm') // => 2022-01-03 16:06
一个轻量的 url 参数转换的 JavaScript 库
npm install qs
import qs from 'qs' qs.parse('user=tom&age=22') // => { user: "tom", age: "22" } qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22
一个简单的、轻量的处理 cookies 的 js API
npm install js-cookie
import Cookies from 'js-cookie' Cookies.set('name', 'value', { expires: 7 }) Cookies.get('name') // => 'value'
bilibili 开源的 html5 flash 视频播放器,使浏览器在不借助 flash 插件的情况下可以播放 flv,目前主流的直播、点播解决方案。
npm install flv.js
<video autoplay controls width="100%" height="500" id="myVideo"></video> import flvjs from 'flv.js' // 页面渲染完成后执行 if (flvjs.isSupported()) { var myVideo = document.getElementById('myVideo') var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://localhost:8080/test.flv' // 视频 url 地址 }) flvPlayer.attachMediaElement(myVideo) flvPlayer.load() flvPlayer.play() }
一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码,用它就对了。
npm install vconsole
import VConsole from 'vconsole' const vConsole = new VConsole() console.log('Hello world')
一个跨浏览器的 css3 动画库,内置了很多典型的 css3 动画,兼容性好,使用方便。
npm install animate.css
import 'animate.css'; <h1 class="animate__animated animate__bounce">An animated element</h1>
一款功能强大的 Javascript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作,制作出各种高性能、平滑过渡的动画效果。
npm install animejs
<div class="ball" style="width: 50px; height: 50px; background: blue"></div> import anime from 'animejs/lib/anime.es.js' // 页面渲染完成之后执行 anime({ targets: '.ball', translateX: 250, rotate: '1turn', backgroundColor: '#F00', duration: 800 })
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^解决 无用评论 打赏 举报
悬赏问题
- ¥15 单相逆变的电压电流双闭环中进行低通滤波PID算法改进
- ¥15 关于#java#的问题,请各位专家解答!
- ¥15 如何卸载arcgis 10.1 data reviewer for desktop
- ¥15 共享文件夹会话中为什么会有WORKGROUP
- ¥15 关于#python#的问题:使用ATL02数据解算光子脚点的坐标(操作系统-windows)
- ¥115 关于#python#的问题:未加密前两个软件都可以打开,加密后只有A软件可打开,B软件可以打开但读取不了数据
- ¥15 在matlab中Application Compiler后的软件无法打开
- ¥15 想问一下STM32创建工程模板时遇到得问题
- ¥15 Fiddler抓包443
- ¥20 Qt Quick Android 项目报错及显示问题