wardrobe/tm-vuetify/components/tm-render/tm-render.vue

<template>
	<view class="tm-render" @touchmove.stop.prevent="">
		
			<!-- #ifdef MP-WEIXIN || MP-QQ || MP-KUAISHOU || MP-ALIPAY  -->
			
			<canvas :style="{width:`${c_w}px`,height:`${c_h}px`}" @mouseup="touchend" @mousedown="touchstart"
				@mousemove="touchmove" @touchend="touchend" @touchmove="touchmove" @touchstart="touchstart" id="exid"
				canvas-id="exid" type="2d"></canvas>
				
			<!-- #endif -->
			
			<!-- #ifndef MP-WEIXIN || MP-QQ || MP-KUAISHOU || MP-ALIPAY || APP-PLUS -->
			<canvas :style="{width:`${c_w}px`,height:`${c_h}px`}" 
				@mouseup="touchend" 
				@mousedown="touchstart"
				@mousemove="touchmove" 
				@touchend="touchend" 
				@touchmove="touchmove" 
				@touchstart="touchstart" 
				id="exid"
				canvas-id="exid" ></canvas>
			<!-- #endif -->
			
			<!-- #ifdef APP-PLUS-->
			
			<canvas 
			@mouseup="CRender.touchend_app"
			@mousedown="CRender.touchstart_app"
			@mousemove="CRender.touchmove_app"
			@touchend="CRender.touchend_app" 
			@touchmove="CRender.touchmove_app" 
			@touchstart="CRender.touchstart_app" 
			
			:prop="app_opts" :change:prop="CRender.update_app_opts" :style="{width:`${c_w}px`,height:`${c_h}px`}" id="exid" canvas-id="exid" ></canvas>
				
			<!-- #endif -->
			
	</view>
</template>

<script>
	// #ifndef APP-PLUS
	import CRender from '@/tm-vuetify/tool/function/crender/class/crender.class'
	// #endif
	
	
	let render = null;
	export default {
		name: "tm-render",
		props: {
			width: {
				type: Number,
				default: 0
			},
			height: {
				type: Number,
				default: 600
			}
		},
		computed: {
			c_w: {
				get: function() {
					return this.cavan_width;
				},
				set: function(val) {
					this.cavan_width = val;
				},

			},
			c_h: function() {
				return uni.upx2px(this.height);
			}
		},
		created() {
			const dpr = uni.getSystemInfoSync().pixelRatio
			this.dpr = dpr;
			this.c_w = uni.upx2px(this.width);
		},
		data() {
			return {
				cavan_width: 0,
				canvaConfig: null,
				dragGrpahId: '',//当前正在拖动或者点击的项目id.
				old_x: 0,
				old_y: 0,
				isDrag: false,
				dpr: 1,
				
				app_opts:{
					render_app:null,
					graph:null,
					fun:[],
					canvaConfig:null
				}
			};
		},
		mounted() {
			this.$nextTick(async function() {
				// #ifndef APP-PLUS
				this.inits();
				// #endif
				// #ifdef APP-PLUS
				let res = await this.$Querey('.tm-render', this).catch(e => {})
				let p = res[0];
				this.$set(this.app_opts,'canvaConfig',p)
				
				// #endif
			})
		},
		
		destroyed() {
			render = null;
			clearTimeout(555)
		},
		methods: {
			async inits() {
				let t = this;
				let res = await this.$Querey('.tm-render', this).catch(e => {})
				let p = res[0];
				t.c_w = p.width || 300;
				t.canvaConfig = p;
				//#ifdef MP-WEIXIN || MP-QQ || MP-KUAISHOU
				uni.createSelectorQuery().in(t).select('#exid').fields({
					node: true,
					context: true,
				}, function(res) {
					let canvas = res.node;

					let ctx = canvas.getContext('2d')
					ctx['dpr'] = t.dpr;
					ctx['scaledpr'] = 10 / (10 * t.dpr);
					const w = ctx['width'] = t.c_w
					const h = ctx['height'] = t.c_h

					// canvas.width = res[0].width * dpr  
					// canvas.height = res[0].height * dpr  
					const dpr = uni.getSystemInfoSync().pixelRatio

					canvas.width = w * dpr
					canvas.height = h * dpr

					// 设置 canvas 坐标原点
					ctx.translate(0, 0);
					ctx.scale(dpr, dpr)
					render = new CRender(ctx, t, canvas)

					t.$nextTick(function() {
						// t.$emit('render', render.area);
						// 12296升级改造
						t.$emit('render', render.area);
					})

				}).exec()

				//#endif
				//#ifndef MP-WEIXIN || MP-QQ || MP-KUAISHOU || MP-ALIPAY || APP-PLUS
				let ctx = uni.createCanvasContext('exid', t)
				
				ctx['dpr'] = t.dpr;
				ctx['scaledpr'] = 10 / (10 * t.dpr);
				const w = ctx['width'] = t.c_w
				const h = ctx['height'] = t.c_h

				render = new CRender(ctx, t)

				t.$nextTick(function() {
					// 12296升级改造
					t.$emit('render', render.area);
					// t.$emit('render', render.area);
				})

				//#endif
			},
			wait(time) {
				return new Promise(resolve => setTimeout(resolve, time))
			},
			getTextWidthAndPos(shape) {
				// #ifdef APP-PLUS
				return [0,0,0,0];
				// #endif
				if (!render) return [0, 0, 0, 0];
				let {
					content,
					position,
					maxWidth,
					rowGap
				} = shape.shape

				const {
					textBaseline,
					fontSize,
					textAlign
				} = shape.style


				let [x, y] = position

				content = content.split('\n')
				const rowNum = content.length
				const lineHeight = fontSize + rowGap
				const allHeight = rowNum * lineHeight - rowGap
				const twidth = render.ctx.measureText(content + "").width;
				if (textBaseline === 'middle') {

					y -= allHeight * rowNum + fontSize / 2
				}

				if (textBaseline === 'bottom') {

					y += fontSize
				}

				if (textAlign === 'center') {
					x -= twidth / 2
					y += fontSize
				}
				return [x, y, twidth, allHeight]
				// measureText
			},
			getRender() {
				// #ifdef APP-PLUS
				return this.app_opts.render_app;
				// #endif
				return render;
			},
			renderCavans(e){
				render = e;
				//app触发这里。
				this.$emit('render', render.area);
				
			},
			//app-plus代理执行函数，参数一为函数名称，参数二为参数。
			appCallFun(funName,arg){
				// #ifdef APP-PLUS
				this.$set( this.app_opts,'fun',[funName,arg])
				// #endif
				// #ifndef APP-PLUS
				console.error("此函数为APP-PLUS专用，详见：https://jx2d.cn/guid/render/%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8.html")
				// #endif
			},
			async addGraph(obj) {
				let t = this;
				let pf = obj;
				// #ifdef APP-PLUS
				this.$set( this.app_opts,'graph',obj)
				return 
				// #endif
				if (typeof obj == 'object' && Array.isArray(obj)) {
					let c = obj.filter(el => {
						return {
							...el,
							tmid: uni.$tm.guid()
						};
					})
					pf = c;
				} else if (typeof obj == 'object' && !Array.isArray(obj)) {
					pf = [{
						...pf,
						tmid: uni.$tm.guid()
					}]
				}
				
				let graphs = pf.map(config => render.add(config))

				graphs.forEach((graph, i) => {
					const config = pf[i]
					t.updateGraphConfigByKey(graph, config)
				})

				await render.launchAnimation()
				//释放内存。
				// graphs = []
				
				return graphs.length == 1 ? graphs[0] : graphs;
			},
			//添加完毕需要更新下，才会显示。
			updateGraphConfigByKey(graph, config) {
				const keys = Object.keys(config)

				keys.forEach(async key => {
					if (key === 'shape' || key === 'style') {
						// graph.animation('shape', {x:config.shape.x+5}, true)
						await graph.animation(key, config[key], true)
					} else {
						graph[key] = config[key]
					}
				})
			},
			touchend(event) {
				let t = this;
				let evx = 0;
				let evy = 0;
				//触摸
				if (event.type.indexOf('mouse') == -1 && event.changedTouches.length == 1) {
					evx = event.changedTouches[0].x
					evy = event.changedTouches[0].y
					//电脑端。
				} else {
					evx = event.pageX - this.canvaConfig.left
					evy = event.pageY - this.canvaConfig.top;

				}

				let x = evx;
				let y = evy;


				this.dragGrpahId = "";
				this.isDrag = false
				//触发画板的事件。
				this.$emit('touchend', {
					x: x,
					y: y
				})
				//在那个元素上离开的。
				let gps = render.graphs;
				let isClickGrpahs = gps.filter((el, index) => {
					if (el.name == 'text') {
						let rect = t.getTextWidthAndPos(el);
						el.hoverRect = rect
					}

					return el.hoverCheck([x, y], el) || el.hoverCheckProcessor([x, y], el);
				});

				if (isClickGrpahs.length > 0) {
					let nowgap = isClickGrpahs[0];

					// 执行元素上绑定的事件。
					if (nowgap[event.type]) nowgap[event.type].call(nowgap, {
						x: x,
						y: y
					});
				}
			},
			touchmove(event) {
				
				let t = this;
				let evx = 0;
				let evy = 0;
				let isPc = false
				//触摸
				if (event.type.indexOf('mouse') == -1 && event.changedTouches.length == 1) {
					evx = event.changedTouches[0].x
					evy = event.changedTouches[0].y
					isPc = false
					//电脑端。
				} else {

					evx = event.pageX - this.canvaConfig.left
					evy = event.pageY - this.canvaConfig.top;
					isPc = true;
				}

				let movex = evx - this.old_x;
				let movey = evy - this.old_y;
				let x = evx;
				let y = evy;
				// 触发发画板的事件
				this.$emit('touchmove', {
					x: x,
					y: y
				})
				if(this.isDrag==false) return;
				//在哪个元素移动的。
				let gps = render.graphs;
				let isClickGrpahs = gps.filter((el, index) => {
					return (el.hoverCheck([x, y], el) || el.hoverCheckProcessor([x, y], el))&&el.tmid==t.dragGrpahId;
				});

				if (isClickGrpahs.length > 0) {
					
					
					let nowgap = isClickGrpahs[0];
					if (isPc) {
						movex = evx - this.old_x;
						movey = evy - this.old_y;
					}
					if ((nowgap.drag === true && this.isDrag == true) || (nowgap.drag === true && isPc == false)) {
						
						if (nowgap.name == "circle" || nowgap.name == "ellipse" ||
							nowgap.name == "ring" || nowgap.name == "arc" || nowgap.name == "regPolygon") {
							nowgap.attr('shape', {
								rx: movex,
								ry: movey
							})
						} else if (nowgap.name == "rect" ||nowgap.name ==  'rectRound'|| nowgap.name == "path"|| nowgap.name == "image"|| nowgap.name == "star" || nowgap.name =='arrow') {
							nowgap.attr('shape', {
								x: movex,
								y: movey
							})
						} else if (nowgap.name == "text") {
							nowgap.attr('shape', {
								position: [movex, movey]
							})
						}

						// 执行元素上绑定的事件。
						if (nowgap[event.type]) nowgap[event.type].call(nowgap, {
							x: movex,
							y: movey
						});
						// if(nowgap['mousemove']||nowgap['touchmove']){

						// 	if (nowgap['mousemove']) nowgap.mousemove.call(nowgap,{x:movex,y:movey})
						// 	if (nowgap['touchmove']) nowgap.touchmove.call(nowgap,{x:movex,y:movey})
						// }
					}
					//配置不允许拖出边界。
					// if(this.dragGrpahId === nowgap.tmid 
					// && movex+nowgap.shape.w<this.canvaConfig.width
					// && movey+nowgap.shape.h<this.canvaConfig.height
					// && x>=0&&y>=0&&movex>=0&&movey>=0
					// ){


					// }
					// this.$emit('shape:touchmove',{x:x,y:y,shape:nowgap})
				}

			},
			touchstart(event) {
				
				let t = this;
				let evx = 0;
				let evy = 0;
				let isPc = false
				//触摸
				if (event.type.indexOf('mouse') == -1 && event.changedTouches.length == 1) {
					evx = event.changedTouches[0].x
					evy = event.changedTouches[0].y
					isPc = false
					//电脑端。
				} else {
					evx = event.pageX - this.canvaConfig.left
					evy = event.pageY - this.canvaConfig.top
					isPc = true;
				}

				let x = evx
				let y = evy

				let gps = render.graphs;
				//点中了哪些图片，第一个是最顶层的，依次类推。
				let isClickGrpahs = gps.filter((el, index) => {
					// 要判断谁的层级高就是先托动谁。
					return el.hoverCheck([x, y], el) || el.hoverCheckProcessor([x, y], el);
				});
				
				if (isClickGrpahs.length > 0) {
					var indexOfMax = 0;
					var max = isClickGrpahs.reduce( (a,c,i) => c.index > a ? (indexOfMax = i,c.index) : a, 0)
					let nowgap = isClickGrpahs[indexOfMax];
					
					if (nowgap.drag === true) {
						this.dragGrpahId = nowgap.tmid;
						let gapPos = [];
						if (nowgap.name == "circle" || nowgap.name == "ellipse" ||
							nowgap.name == "ring" || nowgap.name == "arc" || nowgap.name == "regPolygon"
							
						) {
							gapPos = [nowgap.shape.rx, nowgap.shape.ry]
						} else if (nowgap.name == "rect" ||nowgap.name ==  'rectRound'|| nowgap.name == "path"|| nowgap.name == "image"|| nowgap.name == "star"|| nowgap.name =='arrow') {
							gapPos = [nowgap.shape.x, nowgap.shape.y]
						} else if (nowgap.name == "text") {
							gapPos = nowgap.shape.position
						} 
						if (isPc) {
							this.old_x = evx - gapPos[0]
							this.old_y = evy - gapPos[1];
						} else {
							this.old_x = x - gapPos[0];
							this.old_y = y - gapPos[1];
						}

						this.isDrag = true
						
					}
					// 执行元素上绑定的事件。
					
					if (nowgap[event.type]) nowgap[event.type].call(nowgap, {
						x: x,
						y: y
					});
				} else {
					this.dragGrpahId = ""
				}
				
				this.$emit('touchstart', {
					x: x,
					y: y
				})
			},

		},

	}
</script>
<script module="CRender" lang="renderjs">
	
	var cdr = require('@/tm-vuetify/tool/function/crender/crender.min.js')
	const CRender = window.CRender.CRender
	var  render_app;
	export default {
		mounted() {
			// #ifdef APP-PLUS
			this.$nextTick(function(){
				this.initsAppH5();
			})
			// #endif
		},
		methods: {
			initsAppH5(e) {
				let t = this;
				let canvas = document.querySelector('#exid').querySelector('canvas')
				let canvasPrent = document.querySelector('.tm-render')
				let w = canvasPrent.offsetWidth;
				let h = canvasPrent.offsetHeight;
				canvas.style.width = w+'px';
				canvas.style.height = h+'px';
				render_app = new CRender(canvas)
				
				this.$ownerInstance.$vm.$set(this.$ownerInstance.$vm.app_opts,'render_app',render_app)
				setTimeout(function() {
					t.$ownerInstance.callMethod('renderCavans', render_app)
				}, 10);
				
			},
			update_app_opts(newValue, oldValue, ownerInstance, instance) {
				if(newValue.graph){
					let graph = render_app.add(newValue.graph)
					this.$ownerInstance.$vm.app_opts.graph=null;
				}
				if(newValue.fun){
					if(typeof(newValue.fun)=="object" && Array.isArray(newValue.fun)){
						if(newValue.fun.length>0){
							if(newValue.fun.length==1){
								render_app[newValue.fun[0]]();
							}else if(newValue.fun.length==2){
								render_app[newValue.fun[0]](newValue.fun[1])
							}
						}
					}
					
				}
			},
			wait(time) {
				return new Promise(resolve => setTimeout(resolve, time))
			},
			getTextWidthAndPos(shape) {
				// #ifdef APP-PLUS
				return [0,0,0,0];
				// #endif
				if (!render) return [0, 0, 0, 0];
				let {
					content,
					position,
					maxWidth,
					rowGap
				} = shape.shape
			
				const {
					textBaseline,
					fontSize,
					textAlign
				} = shape.style
			
			
				let [x, y] = position
			
				content = content.split('\n')
				const rowNum = content.length
				const lineHeight = fontSize + rowGap
				const allHeight = rowNum * lineHeight - rowGap
				const twidth = render.ctx.measureText(content + "").width;
				if (textBaseline === 'middle') {
			
					y -= allHeight * rowNum + fontSize / 2
				}
			
				if (textBaseline === 'bottom') {
			
					y += fontSize
				}
			
				if (textAlign === 'center') {
					x -= twidth / 2
					y += fontSize
				}
				return [x, y, twidth, allHeight]
				// measureText
			},
			touchend_app(event) {
				let t = this;
				let evx = 0;
				let evy = 0;
				//触摸
				if (event.type.indexOf('mouse') == -1 && event.changedTouches.length == 1) {
					evx = event.changedTouches[0].x
					evy = event.changedTouches[0].y
					//电脑端。
				} else {
					evx = event.pageX - this.app_opts.canvaConfig.left
					evy = event.pageY - this.app_opts.canvaConfig.top;
			
				}
			
				let x = evx;
				let y = evy;
			
			
				this.dragGrpahId = "";
				this.isDrag = false
				//触发画板的事件。
				this.$emit('touchend', {
					x: x,
					y: y
				})
				//在那个元素上离开的。
				let gps = render_app.graphs;
				let isClickGrpahs = gps.filter((el, index) => {
					if (el.name == 'text') {
						let rect = t.getTextWidthAndPos(el);
						el.hoverRect = rect
					}
			
					return el.hoverCheck([x, y], el) || el.hoverCheckProcessor([x, y], el);
				});
			
				if (isClickGrpahs.length > 0) {
					let nowgap = isClickGrpahs[0];
			
					// 执行元素上绑定的事件。
					if (nowgap[event.type]) nowgap[event.type].call(nowgap, {
						x: x,
						y: y
					});
				}
			},
			touchmove_app(event) {
				let t = this;
				let evx = 0;
				let evy = 0;
				let isPc = false
				//触摸
				if (event.type.indexOf('mouse') == -1 && event.changedTouches.length == 1) {
					evx = event.changedTouches[0].x
					evy = event.changedTouches[0].y
					isPc = false
					//电脑端。
				} else {
					
					evx = event.pageX - this.app_opts.canvaConfig.left
					evy = event.pageY - this.app_opts.canvaConfig.top;
					isPc = true;
				}
			
				let movex = evx - this.old_x;
				let movey = evy - this.old_y;
				let x = evx;
				let y = evy;
				// 触发发画板的事件
				this.$emit('touchmove', {
					x: x,
					y: y
				})
				if(this.isDrag==false) return;
				//在哪个元素移动的。
				let gps = render_app.graphs;
				let isClickGrpahs = gps.filter((el, index) => {
					return (el.hoverCheck([x, y], el) || el.hoverCheckProcessor([x, y], el))&&el.tmid==t.dragGrpahId;
				});
			
				if (isClickGrpahs.length > 0) {
					
					
					let nowgap = isClickGrpahs[0];
					if (isPc) {
						movex = evx - this.old_x;
						movey = evy - this.old_y;
					}
					if ((nowgap.drag === true && this.isDrag == true) || (nowgap.drag === true && isPc == false)) {
						
						if (nowgap.name == "circle" || nowgap.name == "ellipse" ||
							nowgap.name == "ring" || nowgap.name == "arc" || nowgap.name == "regPolygon") {
							nowgap.attr('shape', {
								rx: movex,
								ry: movey
							})
						} else if (nowgap.name == "rect" ||nowgap.name ==  'rectRound'|| nowgap.name == "path"|| nowgap.name == "image"|| nowgap.name == "star" || nowgap.name =='arrow') {
							nowgap.attr('shape', {
								x: movex,
								y: movey
							})
						} else if (nowgap.name == "text") {
							nowgap.attr('shape', {
								position: [movex, movey]
							})
						}
			
						// 执行元素上绑定的事件。
						if (nowgap[event.type]) nowgap[event.type].call(nowgap, {
							x: movex,
							y: movey
						});
					}
				}
			
			},
			touchstart_app(event) {
				
				let t = this;
				let evx = 0;
				let evy = 0;
				let isPc = false
				//触摸
				if (event.type.indexOf('mouse') == -1 && event.changedTouches.length == 1) {
					evx = event.changedTouches[0].x
					evy = event.changedTouches[0].y
					isPc = false
					//电脑端。
				} else {
					evx = event.pageX - this.app_opts.canvaConfig.left
					evy = event.pageY -  this.app_opts.canvaConfig.top
					isPc = true;
				}
				
				let x = evx
				let y = evy
			
				let gps = render_app.graphs;
				
				//点中了哪些图片，第一个是最顶层的，依次类推。
				let isClickGrpahs = gps.filter((el, index) => {
					return el.hoverCheck([x, y], el) || el.hoverCheckProcessor([x, y], el);
				});
			
				if (isClickGrpahs.length > 0) {
					var indexOfMax = 0;
					var max = isClickGrpahs.reduce( (a,c,i) => c.index > a ? (indexOfMax = i,c.index) : a, 0)
					let nowgap = isClickGrpahs[indexOfMax];
					if (nowgap.drag === true) {
						this.dragGrpahId = nowgap.tmid;
						let gapPos = [];
						if (nowgap.name == "circle" || nowgap.name == "ellipse" ||
							nowgap.name == "ring" || nowgap.name == "arc" || nowgap.name == "regPolygon"
							
						) {
							gapPos = [nowgap.shape.rx, nowgap.shape.ry]
						} else if (nowgap.name == "rect" ||nowgap.name ==  'rectRound'|| nowgap.name == "path"|| nowgap.name == "image"|| nowgap.name == "star"|| nowgap.name =='arrow') {
							gapPos = [nowgap.shape.x, nowgap.shape.y]
						} else if (nowgap.name == "text") {
							gapPos = nowgap.shape.position
						} 
						if (isPc) {
							this.old_x = evx - gapPos[0]
							this.old_y = evy - gapPos[1];
						} else {
							this.old_x = x - gapPos[0];
							this.old_y = y - gapPos[1];
						}
			
						this.isDrag = true
						
					}
					// 执行元素上绑定的事件。
					
					if (nowgap[event.type]) nowgap[event.type].call(nowgap, {
						x: x,
						y: y
					});
				} else {
					this.dragGrpahId = ""
				}
			
				this.$emit('touchstart', {
					x: x,
					y: y
				})
			},
			
		}
	}
</script>
<style lang="scss">
	body {}
</style>