<script>
import { onMount } from 'svelte'
import Snap from 'snapsvg-cjs'
var canvas
let index
let width, height, xratio, yratio
$: if (width) xratio = width / 1920
$: if (height) yratio = height / 1080
// onMount(() => {
// canvas = document.getElementById('cvs')
// var context = canvas.getContext('2d')
// canvas.onmousedown = function (e) {
// var clickX = e.pageX - canvas.offsetLeft
// var clickY = e.pageY - canvas.offsetTop
// //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码
// for (var i = 1; i < circles.length; i++) {
// var circle = circles[i]
// //使用勾股定理计算这个点与圆心之间的距离
// var distanceFromCenter = Math.sqrt(
// Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)
// )
// // 如果是其他的点，则设置可以拖动
// if (distanceFromCenter <= circle.radius) {
// // 清除之前选择的圆圈
// index = i
// isDragging = true
// //停止搜索
// return
// }
// }
// //如果点击新的位置，则进入下面的代码，绘制点
// context.clearRect(0, 0, canvas.width, canvas.height)
// //遍历数组画圆
// var circle = new Circle(clickX, clickY)
// circles.push(circle)
// circles[0].color = 'green'
// for (var i = 0; i < circles.length; i++) {
// var circle = circles[i]
// // 绘制圆圈
// context.globalAlpha = 0.85
// context.beginPath()
// context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2)
// context.fillStyle = circle.color
// context.strokeStyle = 'black'
// context.fill()
// context.stroke()
// }
// // 画线
// var point = new Point(clickX, clickY)
// points.push(point)
// context.beginPath()
// context.lineWidth = 4
// //从起始点开始绘制
// context.moveTo(points[0].x, points[0].y)
// for (var i = 0; i < points.length; i++) {
// context.lineTo(points[i].x, points[i].y)
// }
// context.fillStyle = 'rgb(2,100,30)'
// context.fill()
// context.strokeStyle = '#9d4dca'
// context.stroke()
// }
// canvas.onmousemove = function (e) {
// // 判断圆圈是否开始拖拽
// if (isDragging == true) {
// // 判断拖拽对象是否存在
// // 取得鼠标位置
// var x1 = e.pageX - canvas.offsetLeft
// var y1 = e.pageY - canvas.offsetTop
// context.clearRect(0, 0, canvas.width, canvas.height)
// //根据上文得到的index设置index点位置随鼠标改变
// circles[index].x = x1
// circles[index].y = y1
// points[index].x = x1
// points[index].y = y1
// for (var i = 0; i < circles.length; i++) {
// var circle = circles[i]
// // 绘制圆圈
// context.globalAlpha = 0.85
// context.beginPath()
// context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2)
// context.fillStyle = circle.color
// context.strokeStyle = 'black'
// context.fill()
// context.stroke()
// }
// context.beginPath()
// context.moveTo(points[0].x, points[0].y)
// for (var i = 0; i < points.length; i++) {
// context.lineTo(points[i].x, points[i].y)
// }
// context.lineTo(points[0].x, points[0].y)
// // context.fillStyle="#831f68";
// context.fillStyle = 'rgb(2,100,30)'
// context.fill()
// context.strokeStyle = '#9d4dca'
// context.stroke()
// }
// }
// canvas.onmouseup = function () {
// isDragging = false
// }
// canvas.onmouseout = function () {
// isDragging = false
// }
// })
// //线段的点的集合
// var points = []
// //可拖动圆圈的点的集合
// var circles = []
// let isDragging
// //每一个点的对象
// function Point(x, y) {
// this.x = x
// this.y = y
// }
// //圆圈对象
// function Circle(x, y) {
// this.x = x
// this.y = y
// this.radius = 10
// this.color = 'blue'
// //拖拽点的标记
// this.isSelected = false
// }
// $: console.log(circles)
// $: console.log(points)
/*每一次的点都看作一个对象,然后把点放在数组里保存起来
这样circles和points就会是这种形式
points=[{(x0,y0},{x1,y1},{x2,y2}..]
circles=[{x0,y0,10,blue,false}...]*/
let pointsArr = {
pos: [
{
x: 540,
y: 177,
radius: 10,
color: 'green',
isSelected: false,
},
{
x: 548,
y: 269,
radius: 10,
color: 'blue',
isSelected: false,
},
{
x: 669,
y: 284,
radius: 10,
color: 'blue',
isSelected: false,
},
{
x: 717,
y: 189,
radius: 10,
color: 'blue',
isSelected: false,
},
{
x: 537,
y: 175,
radius: 10,
color: 'blue',
isSelected: false,
},
],
}
let sb = ''
let container, svg, rect
$: if (container) {
svg = Snap(container)
}
const drawLabel = (svg, label, xratio, yratio) => {
console.log(svg, label, xratio, yratio);
if (label.pos.length < 3) {
console.log('区域位置数据不足：', label.pos)
return
}
let minx = Infinity,
maxx = -Infinity,
miny = Infinity,
maxy = -Infinity
const points = label.pos.reduce((result, p) => {
const x = p.x * xratio
const y = p.y * yratio
console.log(y);
result.push(x)
result.push(y)
if (x < minx) minx = x
if (x > maxx) maxx = x
if (y < miny) miny = y
if (y > maxy) maxy = y
return result
}, [])
// svg.polygon(points).attr({
// fill: label.color,
// 'fill-opacity': 0.5,
// stroke: label.color,
// strokeWidth: 2,
// 'stroke-dasharray': [4, 4],
// })
// 655.85, 298.15833333333336, 695.2640625, 350.9851851851852, 677.3963541666667, 443.2083333333333, 602.7723958333333, 413.6611111111111, 570.1901041666666, 297.26296296296294, 655.85, 298.15833333333336
console.log(points, 'points')
const cx = (minx + maxx) / 2
const cy = (miny + maxy) / 2
// return drawPoint(svg, label, xratio, yratio, cx, cy)
}
setTimeout(() => {
drawLabel(svg, pointsArr, xratio, yratio)
}, 3000);
</script>
<main>
<svg {width} {height} bind:this={container}>
<polygon
points=" 655.85, 298.15833333333336, 695.2640625, 350.9851851851852, 677.3963541666667, 443.2083333333333, 602.7723958333333, 413.6611111111111, 570.1901041666666, 297.26296296296294, 655.85, 298.15833333333336
"
/>
</svg>
<div
class="canvas-box"
style="width: 1080px; height: 1920px;padding-left: 100px;"
>
<canvas id="cvs" width="1080" height="1920">不支持canvas</canvas>
</div>
</main>
<style>
</style>
console