做二手的网站有哪些,开公司可以在哪些网站做推广,网站免费正能量直接进入小说,wordpress如何修改行距总结一下#xff1a;
要进行海报绘制离不开canvas#xff0c;我们是先进行图片#xff0c;文字的拖拽、旋转等操作 最后再对canvas进行绘制#xff0c;完成海报绘制。
背景区域设置为 position: relative#xff0c;方便图片在当前区域中拖动等处理。添加图片#xff0…总结一下
要进行海报绘制离不开canvas我们是先进行图片文字的拖拽、旋转等操作 最后再对canvas进行绘制完成海报绘制。
背景区域设置为 position: relative方便图片在当前区域中拖动等处理。添加图片监听图片在背景区域下的 touchstart touchmove touchend 事件拖动图片在touchmove中对图片进行位置后续坐标-初始坐标、角度勾股定理计算点到圆心距离利用角度计算公式计算、放缩比例勾股定理计算点到圆心的半径距离拖动停止的半径除以初始的半径获得放缩比例scale的计算最终canvas绘制利用dom中的空canvas将图片依次绘制到canvas中并获取链接
部分主要代码如下
const ctx uni.createCanvasContext(myCanvas, this);
ctx.drawImage(this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);const ctx uni.createCanvasContext(myCanvas, this);
ctx.drawImage(this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);
ctx.save();
ctx.beginPath();// 画背景色白色
// ctx.setFillStyle(#fff);
// ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
for (let i0; iitems.length; i) {const cur items[i]ctx.save();ctx.translate(0, 0);ctx.beginPath();if(cur.image) {ctx.translate(cur.x, cur.y); // 圆心坐标ctx.rotate(cur.angle * Math.PI / 180); // 图片旋转的角度ctx.translate(-(cur.width * cur.scale / 2), -(cur.height * cur.scale / 2)) // 图片的缩放ctx.drawImage(cur.image, 0, 0, cur.width * cur.scale, cur.height * cur.scale); // 图片绘制}if (cur.text) {ctx.font ${cur.font}px arial;ctx.fillStyle cur.fillStyle;ctx.fillText(cur.text, cur.left, cur.top Number(cur.font));console.log(cur.left, cur.top Number(cur.font))}ctx.restore();
}
ctx.draw(true, () {// 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题 canvasT (this.cutT / this.cropperH) * (this.imageH / pixelRatio)var canvasW ((this.cropperW - this.cutL - this.cutR) / this.cropperW) * IMG_REAL_W;var canvasH ((this.cropperH - this.cutT - this.cutB) / this.cropperH) * IMG_REAL_H;var canvasL (this.cutL / this.cropperW) * IMG_REAL_W;var canvasT (this.cutT / this.cropperH) * IMG_REAL_H;uni.canvasToTempFilePath({x: canvasL,y: canvasT,width: canvasW,height: canvasH,// destWidth: canvasW,// destHeight: canvasH,quality: this.quality,fileType: this.fileType,canvasId: myCanvas,success: (res) {uni.hideLoading();// 成功获得地址的地方// this.$emit(getImg, res.tempFilePath);this.saveImg(res.tempFilePath)this.isShow false;},fail: (err) {uni.hideLoading();uni.showToast({title: 图片截取失败,icon: none,});},},this);
});!-- 海报背景区域采用style动态调整cropperInitWcropperInitH一般为满屏 --view classuni-corpper:stylewidth: cropperInitW px;height: cropperInitH px;background:#000!-- 海报绘制区域采用style动态调整按照图片的长宽比例动态计算 cropperW等--view classuni-corpper-content :stylewidth: cropperW px;height: cropperH px;left: cropperL px;top: cropperT px!-- 背景图片区域 cropperW等同上 --image :srcimageSrc :stylewidth: cropperW px;height: cropperH px; border: 3px solid #ff0000;/image!-- 海报上其他图片处理for循环itemList通过点击添加 --block v-foritem in itemList :keyitem.id!-- 动态设置图片区域的缩放比例还有pisition的左右位置选中时z-index变大 --view classtouchWrap :style{transform: scale( item.scale ), top: item.top px, left: item.left px, z-index:item.active ? 100 : 1}view classimgWrap :classitem.active ? touchActive : :style{transform: rotate( item.angle deg), border: item.active ? 4 * item.oScale : 0 rpx #fff dashed}image v-ifitem.image:srcitem.image :style{width: item.width px, height: item.height px} !-- 图片点击时记录点击图片当前位置 --touchstart(e) WraptouchStart(e, item)!-- 图片拖动时记录图片当前位置并实时计算图片大小、旋转角度等并存储至itemList中 --touchmove(e) WraptouchMove(e, item)!--一般不做处理 --touchend(e) WraptouchEnd(e, item)modewidthFix/image!-- 删除按钮 --image classx src/static/close.png :style{transform: scale( item.oScale ), transform-origin: center}click(e) deleteItem(e, item)/image!-- 图片放缩按钮 --image v-ifitem.imageclasso src/static/scale.png :style{transform: scale( item.oScale ), transform-origin: center}!-- 图片点击时记录点击图片当前坐标半径 --touchstart(e) oTouchStart(e, item)!-- 图片点击时记录点击图片当前坐标计算新的半径得到scale缩放比例计算角度差获取当前角度 --touchmove(e) oTouchMove(e, item)touchend(e) WraptouchEnd(e, item)/image/view/view/block/viewcanvas canvas-idmyCanvas :styleposition:absolute;border: 2px solid red; width: imageW px;height: imageH px;top:-9999px;left:-9999px;/canvas/view// 点击图片或文字WraptouchStart(e, it) {currentChoose it// 循环图片数组获取点击的图片信息for (let i 0; i items.length; i) {items[i].active false;if (it.id items[i].id) {index i;items[index].active true;}}// this.setData({// itemList: items// })this.setList(items, itemList)// 获取点击的坐标值 lx ly是图片点击时的位置值items[index].lx e.touches[0].clientX;items[index].ly e.touches[0].clientY;},// 拖动图片WraptouchMove(e) {// 获取点击的坐标值 _lx _ly 是图片移动的位置值items[index]._lx e.touches[0].clientX;items[index]._ly e.touches[0].clientY;// left 是_lx 减去 lx_ly 减去 ly也就是现在位置减去原来的位置。items[index].left items[index]._lx - items[index].lx;items[index].top items[index]._ly - items[index].ly;// 同理更新图片中心坐标点用于旋转items[index].x items[index]._lx - items[index].lx;items[index].y items[index]._ly - items[index].ly;// 停止了以后把lx的值赋值为现在的位置items[index].lx e.touches[0].clientX;items[index].ly e.touches[0].clientY;// this.setData({// itemList: items// })this.setList(items, itemList)},// 放开图片WraptouchEnd(e, it) {touchNum clearTimeout(timer)timer nulltimer setTimeout(this.timeSta, 250)},// 计算坐标点到圆心的距离getDistancs(cx, cy, pointer_x, pointer_y) {var ox pointer_x - cx;var oy pointer_y - cy;return Math.sqrt(ox * ox oy * oy);},/**参数cx和cy为图片圆心坐标*参数pointer_x和pointer_y为手点击的坐标*返回值为手点击的坐标到圆心的角度*/countDeg(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; // 计算当前角度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; // 返回角度},体验
