@zhangqingcq/vgce 0.0.20 → 0.0.21

package/src/components/vue3-ruler-tool/index.vue

@@ -1,368 +1,315 @@
-<script lang="ts">
+<script lang="ts" setup>
 	import { pinia } from '@/hooks'
 	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
+	import { useConfigStore } from '@/stores/config'
 
-	export default defineComponent({
-		name: 'V3RulerComponent',
-		props: {
-			position: {
-				type: String,
-				default: 'relative',
-				validator: (val: string) => {
-					return ['absolute', 'fixed', 'relative', 'static', 'inherit'].indexOf(val) !== -1
-				}
-			}, // 规定元素的定位类型
-			isHotKey: {
-				type: Boolean,
-				default: true
-			}, // 热键开关
-			isScaleRevise: {
-				type: Boolean,
-				default: false
-			}, // 刻度修正(根据content进行刻度重置)
-			value: {
-				type: Array,
-				default: () => {
-					return [
-						{
-							type: 'h',
-							site: 50
-						},
-						{
-							type: 'v',
-							site: 180
-						}
-					] //
-				}
-			}, // 预置参考线
-			contentLayout: {
-				type: Object,
-				default: () => {
-					return {
-						top: 0,
-						left: 0
-					}
-				}
-			}, // 内容部分布局
-			parent: {
-				type: Boolean,
-				default: false
-			},
-			visible: {
-				type: Boolean,
-				default: true
-			},
-			stepLength: {
-				type: Number,
-				default: 50,
-				validator: (val: number) => val % 10 === 0
-			} // 步长
-		},
-		emits: ['input', 'update:visible'],
-		setup(props, context) {
-			const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
-			/**
-			 * @description 绑定事件 on(element, event, handler)
-			 */
-			const on = (function () {
-				return function (element: any, event: any, handler: any) {
-					if (element && event && handler) {
-						element.addEventListener(event, handler, false)
-					}
-				}
-			})()
-
-			/**
-			 * @description 解绑事件 off(element, event, handler)
-			 */
-			const off = (function () {
-				return function (element: any, event: any, handler: any) {
-					if (element && event) {
-						element.removeEventListener(event, handler, false)
-					}
-				}
-			})()
-			const size = 17
-			let left_top = 18 // 内容左上填充
-			let windowWidth = ref(0) // 窗口宽度
-			let windowHeight = ref(0) // 窗口高度
-			let xScale = ref<[{ id: number }]>([{ id: 0 }]) // 水平刻度
-			let yScale = ref<[{ id: number }]>([{ id: 0 }]) // 垂直刻度
-			let topSpacing = 0 // 标尺与窗口上间距
-			let leftSpacing = 0 //  标尺与窗口左间距
-			let isDrag = ref(false)
-			let dragFlag = '' // 拖动开始标记，可能值x(从水平标尺开始拖动);y(从垂直标尺开始拖动)
-			let horizontalDottedLeft = ref(-999) // 水平虚线位置
-			let verticalDottedTop = ref(-999) // 垂直虚线位置
-			let rulerWidth = 0 // 垂直标尺的宽度
-			let rulerHeight = 0 // 水平标尺的高度
-			let dragLineId = '' // 被移动线的ID
-			//ref
-			const content = ref(null)
-			const el = ref(null)
-			const verticalRuler = ref(null)
-			const horizontalRuler = ref(null)
-			const wrapperStyle: any = computed(() => {
-				return {
-					width: windowWidth.value + 'px',
-					height: windowHeight.value + 'px',
-					position: props.position
-				}
-			})
-			const contentStyle = computed(() => {
-				return {
-					left: props.contentLayout.left + 'px',
-					top: props.contentLayout.top + 'px',
-					padding: left_top + 'px 0px 0px ' + left_top + 'px'
-				}
-			})
-			const lineList = computed(() => {
-				let hCount = 0
-				let vCount = 0
-				return props.value.map((item: any) => {
-					const isH = item.type === 'h'
-					return {
-						id: `${item.type}_${isH ? hCount++ : vCount++}`,
-						type: item.type,
-						title: item.site.toFixed(2) + 'px',
-						[isH ? 'top' : 'left']: item.site / (props.stepLength / 50) + size
-					}
-				})
-			})
-
-			svgEditLayoutStore.$subscribe((mutation) => {
-				if (mutation.storeId === 'svg-edit-layout-store') {
-					window.setTimeout(init, 420)
-				}
-			})
+	const props = withDefaults(
+		defineProps<{
+			visible?: boolean
+			stepLength?: number // 步长
+		}>(),
+		{
+			visible: true,
+			stepLength: 100
+		}
+	)
 
-			onMounted(() => {
-				on(document, 'mousemove', dottedLineMove)
-				on(document, 'mouseup', dottedLineUp)
-				init()
-				on(window, 'resize', windowResize)
-			})
-			onBeforeUnmount(() => {
-				off(document, 'mousemove', dottedLineMove)
-				off(document, 'mouseup', dottedLineUp)
-				off(window, 'resize', windowResize)
-			})
-			//function
-			const init = () => {
-				box()
-				scaleCalc()
+	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
+	const configStore = useConfigStore(pinia)
+	/**
+	 * @description 绑定事件 on(element, event, handler)
+	 */
+	const on = (function () {
+		return function (element: any, event: any, handler: any) {
+			if (element && event && handler) {
+				element.addEventListener(event, handler, false)
 			}
+		}
+	})()
 
-			const windowResize = () => {
-				xScale.value = [{ id: 0 }]
-				yScale.value = [{ id: 0 }]
-				init()
+	/**
+	 * @description 解绑事件 off(element, event, handler)
+	 */
+	const off = (function () {
+		return function (element: any, event: any, handler: any) {
+			if (element && event) {
+				element.removeEventListener(event, handler, false)
 			}
-			const getLineStyle = ({ type, top, left }: any) => {
-				return type === 'h' ? { top: top + 'px' } : { left: left + 'px' }
-			}
-			const handleDragLine = ({ type, id }: any) => {
-				return type === 'h' ? dragHorizontalLine(id) : dragVerticalLine(id)
+		}
+	})()
+	let contentPadding = 18 // 内容左上填充
+	let windowWidth = ref(0) // 窗口宽度
+	let windowHeight = ref(0) // 窗口高度
+	let xScale = ref<Array<{ id: number }>>([]) // 水平刻度
+	let yScale = ref<Array<{ id: number }>>([]) // 垂直刻度
+	const lines = ref<any[]>([])
+	let isDrag = ref(false)
+	let dragFlag = '' // 拖动开始标记，可能值x(从水平标尺开始拖动);y(从垂直标尺开始拖动)
+	let horizontalDottedLeft = ref(-999) // 水平虚线位置
+	let verticalDottedTop = ref(-999) // 垂直虚线位置
+	let rulerWidth = 18 // 垂直标尺的宽度
+	let rulerHeight = 18 // 水平标尺的高度
+	let dragLineId = '' // 被移动线的ID
+	//ref
+	const content = ref(null)
+	const el = ref(null)
+	const verticalRuler = ref(null)
+	const horizontalRuler = ref(null)
+	const wrapperStyle: any = computed(() => ({
+		width: windowWidth.value + 'px',
+		height: windowHeight.value + 'px'
+	}))
+	const contentStyle = computed(() => ({
+		padding: contentPadding + 'px 0px 0px ' + contentPadding + 'px'
+	}))
+	const lineList = computed(() => {
+		let hCount = 0
+		let vCount = 0
+		return lines.value.map((item: any) => {
+			const isH = item.type === 'h'
+			return {
+				id: `${item.type}_${isH ? hCount++ : vCount++}`,
+				type: item.type,
+				title: item.site.toFixed(0) + 'px',
+				[isH ? 'top' : 'left']:
+					item.site * configStore.svg.scale +
+					contentPadding +
+					svgEditLayoutStore.center_offset[isH ? 'y' : 'x'] * configStore.svg.scale
 			}
-			//获取窗口宽与高
-			const box = () => {
-				if (props.isScaleRevise) {
-					// 根据内容部分进行刻度修正
-					const contentLeft = (content.value as any).offsetLeft
-					const contentTop = (content.value as any).offsetTop
-					getCalcRevise(xScale.value, contentLeft)
-					getCalcRevise(yScale.value, contentTop)
-				}
-				if (props.parent) {
-					const style = window.getComputedStyle((el.value as any).parentNode, null)
-					windowWidth.value = parseInt(style.getPropertyValue('width'), 10)
-					windowHeight.value = parseInt(style.getPropertyValue('height'), 10)
-				} else {
-					windowWidth.value = document.documentElement.clientWidth - leftSpacing
-					windowHeight.value = document.documentElement.clientHeight - topSpacing
+		})
+	})
+
+	svgEditLayoutStore.$subscribe((m: any) => {
+		if (m.events?.target?.hasOwnProperty('left_nav') || m.events?.target?.hasOwnProperty('right_nav')) {
+			window.setTimeout(init, 420)
+		}
+	})
+
+	configStore.$subscribe((m: any) => {
+		if (m.events?.target?.hasOwnProperty('scale')) {
+			scaleCalc()
+		}
+	})
+	onMounted(() => {
+		on(document, 'mousemove', mouseMove)
+		on(document, 'mouseup', mouseUp)
+		init()
+		on(window, 'resize', windowResize)
+	})
+	onBeforeUnmount(() => {
+		off(document, 'mousemove', mouseMove)
+		off(document, 'mouseup', mouseUp)
+		off(window, 'resize', windowResize)
+	})
+	const init = () => {
+		box()
+		scaleCalc()
+	}
+
+	const windowResize = () => {
+		xScale.value = []
+		yScale.value = []
+		init()
+	}
+	const getLineStyle = ({ type, top, left }: any) => {
+		return type === 'h' ? { top: top + 'px' } : { left: left + 'px' }
+	}
+	const handleDragLine = ({ type, id }: any) => {
+		return type === 'h' ? dragHorizontalLine(id) : dragVerticalLine(id)
+	}
+	//获取窗口宽与高
+	const box = () => {
+		const style = window.getComputedStyle((el.value as any).parentNode, null)
+		windowWidth.value = parseInt(style.getPropertyValue('width'))
+		windowHeight.value = parseInt(style.getPropertyValue('height'))
+		rulerWidth = (verticalRuler.value as any).clientWidth
+		rulerHeight = (horizontalRuler.value as any).clientHeight
+	}
+	// 计算刻度
+	const scaleCalc = () => {
+		getCalc(xScale.value, windowWidth.value, svgEditLayoutStore.center_offset.x)
+		getCalc(yScale.value, windowHeight.value, svgEditLayoutStore.center_offset.y)
+	}
+
+	//获取刻度
+	const getCalc = (
+		array: {
+			id: number
+		}[],
+		length: number,
+		start: number
+	) => {
+		if (array.length === 0) {
+			for (let i = 0; i < length; i += props.stepLength) {
+				if (i % props.stepLength === 0) {
+					array.push({ id: Number((i / configStore.svg.scale - start).toFixed(0)) })
 				}
-				rulerWidth = (verticalRuler.value as any).clientWidth
-				rulerHeight = (horizontalRuler.value as any).clientHeight
-				setSpacing()
-			}
-			const setSpacing = () => {
-				topSpacing = (horizontalRuler.value as any).getBoundingClientRect().y //.offsetParent.offsetTop
-				leftSpacing = (verticalRuler.value as any).getBoundingClientRect().x // .offsetParent.offsetLeft
-			}
-			// 计算刻度
-			const scaleCalc = () => {
-				getCalc(xScale.value, windowWidth.value)
-				getCalc(yScale.value, windowHeight.value)
 			}
+		} else {
+			array.forEach((e, i) => {
+				e.id = Number(((i * props.stepLength) / configStore.svg.scale - start).toFixed(0))
+			})
+		}
+	}
 
-			//获取刻度
-			const getCalc = (array: [{ id: number }], length: any) => {
-				for (let i = 0; i < (length * props.stepLength) / 50; i += props.stepLength) {
-					if (i % props.stepLength === 0 && i != 0) {
-						array.push({ id: i })
-					}
+	const mouseMove = (e: any) => {
+		//移动画布
+		scaleCalc()
+		dottedLineMove(e)
+	}
+	//虚线移动
+	const dottedLineMove = ($event: any) => {
+		if ($event.layerX === $event.x || $event.layerY === $event.y) {
+			return
+		}
+		switch (dragFlag) {
+			case 'x':
+				if (isDrag.value) {
+					verticalDottedTop.value = $event.layerY
 				}
-				// console.log(array, 225);
-			}
-			// 获取矫正刻度方法
-			const getCalcRevise = (array: [{ id: number }], length: any) => {
-				for (let i = 0; i < length; i += 1) {
-					if (i % props.stepLength === 0 && i + props.stepLength <= length) {
-						array.push({ id: i })
-					}
+				break
+			case 'y':
+				if (isDrag.value) {
+					horizontalDottedLeft.value = $event.layerX
 				}
-				// console.log(array, 233);
-			}
-			//生成一个参考线
-			const newLine = (val: any) => {
-				isDrag.value = true
-				dragFlag = val
-			}
-			//虚线移动
-			const dottedLineMove = ($event: any) => {
-				setSpacing()
-				switch (dragFlag) {
-					case 'x':
-						if (isDrag.value) {
-							verticalDottedTop.value = $event.pageY - topSpacing
-						}
-						break
-					case 'y':
-						if (isDrag.value) {
-							horizontalDottedLeft.value = $event.pageX - leftSpacing
-						}
-						break
-					case 'h':
-						if (isDrag.value) {
-							verticalDottedTop.value = $event.pageY - topSpacing
-						}
-						break
-					case 'v':
-						if (isDrag.value) {
-							horizontalDottedLeft.value = $event.pageX - leftSpacing
-						}
-						break
-					default:
-						break
+				break
+			case 'h':
+				if (isDrag.value) {
+					verticalDottedTop.value = $event.layerY
 				}
-			}
-			//虚线松开
-			const dottedLineUp = ($event: any) => {
-				setSpacing()
+				break
+			case 'v':
 				if (isDrag.value) {
-					isDrag.value = false
-					const cloneList = JSON.parse(JSON.stringify(props.value))
-					switch (dragFlag) {
-						case 'x':
-							cloneList.push({
-								type: 'h',
-								site: ($event.pageY - topSpacing - size) * (props.stepLength / 50)
-							})
-							context.emit('input', cloneList)
-							break
-						case 'y':
-							cloneList.push({
-								type: 'v',
-								site: ($event.pageX - leftSpacing - size) * (props.stepLength / 50)
-							})
-							context.emit('input', cloneList)
-							break
-						case 'h':
-							dragCalc(cloneList, $event.pageY, topSpacing, rulerHeight, 'h')
-							context.emit('input', cloneList)
-							break
-						case 'v':
-							dragCalc(cloneList, $event.pageX, leftSpacing, rulerWidth, 'v')
-							context.emit('input', cloneList)
-							break
-						default:
-							break
-					}
-					verticalDottedTop.value = horizontalDottedLeft.value = -10
+					horizontalDottedLeft.value = $event.layerX
 				}
-			}
-			const dragCalc = (list: any, page: any, spacing: any, ruler: any, type: any) => {
-				if (page - spacing < ruler) {
-					let Index
-					lineList.value.forEach((item: any, index: any) => {
-						if (item.id === dragLineId) {
-							Index = index
-						}
-					})
-					list.splice(Index, 1, {
-						type: type,
-						site: -600
-					})
-				} else {
-					let Index
-					lineList.value.forEach((item, index) => {
-						if (item.id === dragLineId) {
-							Index = index
-						}
+				break
+			default:
+				break
+		}
+	}
+	//生成一个参考线
+	const newLine = (val: any) => {
+		isDrag.value = true
+		dragFlag = val
+	}
+	const mouseUp = (e: any) => {
+		dottedLineUp(e)
+	}
+	//虚线松开
+	const dottedLineUp = ($event: any) => {
+		if (isDrag.value) {
+			isDrag.value = false
+			switch (dragFlag) {
+				case 'x':
+					const x = Math.round(
+						($event.layerY - contentPadding) / configStore.svg.scale - svgEditLayoutStore.center_offset.y
+					)
+					if (x <= 0) {
+						verticalDottedTop.value = -999
+						return
+					}
+					lines.value.push({
+						type: 'h',
+						site: x
 					})
-					list.splice(Index, 1, {
-						type: type,
-						site: (page - spacing - size) * (props.stepLength / 50)
+					break
+				case 'y':
+					const y = Math.round(
+						($event.layerX - contentPadding) / configStore.svg.scale - svgEditLayoutStore.center_offset.x
+					)
+					if (y <= 0) {
+						horizontalDottedLeft.value = -999
+						return
+					}
+					lines.value.push({
+						type: 'v',
+						site: y
 					})
-				}
-			}
-			//水平标尺按下鼠标
-			const horizontalDragRuler = () => {
-				newLine('x')
-			}
-			//垂直标尺按下鼠标
-			const verticalDragRuler = () => {
-				newLine('y')
-			}
-			// 水平线处按下鼠标
-			const dragHorizontalLine = (id: any) => {
-				isDrag.value = true
-				dragFlag = 'h'
-				dragLineId = id
-			}
-			// 垂直线处按下鼠标
-			const dragVerticalLine = (id: any) => {
-				isDrag.value = true
-				dragFlag = 'v'
-				dragLineId = id
-			}
-			return {
-				wrapperStyle,
-				horizontalDragRuler,
-				xScale,
-				verticalDragRuler,
-				yScale,
-				verticalDottedTop,
-				horizontalDottedLeft,
-				lineList,
-				getLineStyle,
-				handleDragLine,
-				contentStyle,
-				isDrag,
-				content,
-				el,
-				verticalRuler,
-				horizontalRuler
+					break
+				case 'h':
+					dragCalc(
+						lines.value,
+						Math.round(($event.layerY - contentPadding) / configStore.svg.scale - svgEditLayoutStore.center_offset.y),
+						Math.round(rulerHeight / configStore.svg.scale - svgEditLayoutStore.center_offset.y),
+						'h'
+					)
+					break
+				case 'v':
+					dragCalc(
+						lines.value,
+						Math.round(($event.layerX - contentPadding) / configStore.svg.scale - svgEditLayoutStore.center_offset.x),
+						Math.round(rulerWidth / configStore.svg.scale - svgEditLayoutStore.center_offset.x),
+						'v'
+					)
+					break
+				default:
+					break
 			}
+
+			verticalDottedTop.value = horizontalDottedLeft.value = -999
 		}
-	})
+	}
+	const dragCalc = (list: any, page: any, ruler: any, type: any) => {
+		if (page < ruler) {
+			let Index
+			lineList.value.forEach((item: any, index: any) => {
+				if (item.id === dragLineId) {
+					Index = index
+				}
+			})
+			list.splice(Index, 1)
+		} else {
+			let Index
+			lineList.value.forEach((item, index) => {
+				if (item.id === dragLineId) {
+					Index = index
+				}
+			})
+			list.splice(Index, 1, {
+				type: type,
+				site: page
+			})
+		}
+	}
+	//水平标尺按下鼠标
+	const horizontalDragRuler = () => {
+		newLine('x')
+	}
+	//垂直标尺按下鼠标
+	const verticalDragRuler = () => {
+		newLine('y')
+	}
+	// 水平线处按下鼠标
+	const dragHorizontalLine = (id: any) => {
+		isDrag.value = true
+		dragFlag = 'h'
+		dragLineId = id
+	}
+	// 垂直线处按下鼠标
+	const dragVerticalLine = (id: any) => {
+		isDrag.value = true
+		dragFlag = 'v'
+		dragLineId = id
+	}
 </script>
 
 <template>
 	<div :style="wrapperStyle" class="vue-ruler-wrapper" onselectStart="return false;" ref="el">
-		<section v-show="$props.visible">
+		<section v-show="props.visible">
 			<div ref="horizontalRuler" class="vue-ruler-h" @mousedown.stop="horizontalDragRuler">
-				<span v-for="(item, index) in xScale" :key="index" :style="{ left: index * 50 + 2 + 'px' }" class="n">{{
+				<span v-for="(item, index) in xScale" :style="{ left: index * stepLength + 'px' }" class="n">{{
 					item.id
 				}}</span>
 			</div>
 			<div ref="verticalRuler" class="vue-ruler-v" @mousedown.stop="verticalDragRuler">
-				<span v-for="(item, index) in yScale" :key="index" :style="{ top: index * 50 + 2 + 'px' }" class="n">{{
-					item.id
-				}}</span>
+				<span v-for="(item, index) in yScale" :style="{ top: index * stepLength + 'px' }" class="n">{{ item.id }}</span>
 			</div>
-			<div :style="{ top: verticalDottedTop + 'px' }" class="vue-ruler-ref-dot-h" />
-			<div :style="{ left: horizontalDottedLeft + 'px' }" class="vue-ruler-ref-dot-v" />
+			<div :style="{ top: verticalDottedTop + 'px' }" class="vue-ruler-ref-dot-h"
+				><span>{{ Math.round((verticalDottedTop - rulerHeight) / configStore.svg.scale) }}</span></div
+			>
+			<div :style="{ left: horizontalDottedLeft + 'px' }" class="vue-ruler-ref-dot-v"
+				><span>{{ Math.round((horizontalDottedLeft - rulerWidth) / configStore.svg.scale) }}</span></div
+			>
 			<div
 				v-for="item in lineList"
 				:title="item.title"
@@ -370,7 +317,7 @@
 				:key="item.id"
 				:class="`vue-ruler-ref-line-${item.type}`"
 				@mousedown="handleDragLine(item)"
-			></div>
+			/>
 		</section>
 		<div ref="content" class="vue-ruler-content" :style="contentStyle">
 			<slot />
@@ -385,6 +332,7 @@
 		top: 0;
 		z-index: 999;
 		user-select: none;
+		position: relative;
 	}
 
 	.vue-ruler-h,
@@ -396,28 +344,25 @@
 		position: absolute;
 		left: 0;
 		top: 0;
-		overflow: hidden;
 		z-index: 999;
 	}
 
+	.vue-ruler-h,
+	.vue-ruler-v {
+		opacity: 0.6;
+		background-color: rgba(0, 0, 0, 0.04);
+	}
+
 	.vue-ruler-h {
 		width: calc(100% - 18px);
 		height: 18px;
 		left: 18px;
-		opacity: 0.6;
-		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAASCAMAAAAuTX21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACNJREFUeNpiYCAdMDKRCka1jGoBA2JZZGshiaCXFpIBQIABAAplBkCmQpujAAAAAElFTkSuQmCC)
-			repeat-x;
-		/*./image/ruler_h.png*/
 	}
 
 	.vue-ruler-v {
 		width: 18px;
 		height: calc(100% - 18px);
 		top: 18px;
-		opacity: 0.6;
-		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAyCAMAAABmvHtTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACBJREFUeNpiYGBEBwwMTGiAakI0NX7U9aOuHyGuBwgwAH6bBkAR6jkzAAAAAElFTkSuQmCC)
-			repeat-y;
-		/*./image/ruler_v.png*/
 	}
 
 	.vue-ruler-v .n,
@@ -429,12 +374,22 @@
 		color: #333;
 		cursor: default;
 		top: 1px;
+		box-sizing: border-box;
+	}
+
+	.vue-ruler-h .n {
+		border-left: 1px solid #856b01;
+		padding-left: 3px;
+		height: 100%;
+		padding-top: 3px;
 	}
 
 	.vue-ruler-v .n {
-		width: 8px;
-		left: 3px;
-		word-wrap: break-word;
+		width: 100%;
+		writing-mode: vertical-rl;
+		border-top: 1px solid #856b01;
+		padding-top: 3px;
+		padding-right: 3px;
 	}
 
 	.vue-ruler-ref-line-v,
@@ -446,46 +401,48 @@
 
 	.vue-ruler-ref-line-h {
 		width: 100%;
-		height: 3px;
-		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAMAAADU3h9xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYIACgAADAAAJAAE0lmO3AAAAAElFTkSuQmCC)
-			repeat-x left center;
-		/*./image/line_h.png*/
-		cursor: n-resize;
-		/*url(./image/cur_move_h.cur), move*/
+		height: 4px;
+		border-top: 1px solid #ff4101;
+		cursor: s-resize;
 	}
 
 	.vue-ruler-ref-line-v {
-		width: 3px;
+		width: 4px;
 		height: 100%;
-		_height: 9999px;
-		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAMAAAAPxGVzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYEAFAAEGAAAQAAGePof9AAAAAElFTkSuQmCC)
-			repeat-y center top;
-		/*./image/line_v.png*/
+		border-left: 1px solid #ff4101;
 		cursor: w-resize;
-		/*url(./image/cur_move_v.cur), move*/
+	}
+
+	.vue-ruler-ref-dot-h,
+	.vue-ruler-ref-dot-v {
+		span {
+			position: absolute;
+			font-size: 12px;
+			color: #856b01;
+		}
 	}
 
 	.vue-ruler-ref-dot-h {
 		width: 100%;
-		height: 3px;
-		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
-			repeat-x left 1px;
-		/*./image/line_dot.png*/
+		height: 4px;
 		cursor: n-resize;
-		/*url(./image/cur_move_h.cur), move*/
-		top: -10px;
+		border-top: 1px dashed #999;
+		span {
+			left: 30px;
+			top: 3px;
+		}
 	}
 
 	.vue-ruler-ref-dot-v {
-		width: 3px;
+		width: 4px;
 		height: 100%;
 		_height: 9999px;
-		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
-			repeat-y 1px top;
-		/*./image/line_dot.png*/
 		cursor: w-resize;
-		/*url(./image/cur_move_v.cur), move*/
-		left: -10px;
+		border-left: 1px dashed #999;
+		span {
+			top: 30px;
+			left: 7px;
+		}
 	}
 
 	.vue-ruler-content {