svg 根据鼠标滑动画曲线
npm install --save fit-curve
npm i raphael
<div id="container">
<svg height="400" version="1.1" width="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;border:1px solid gray;stroke-width: 2px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs></svg>
</div>
<button class="btn" id="clear-button">清除</button><br>
<button class="btn" id="retreat-button">撤退一条线</button><br>
import fitCurve from 'fit-curve'
import Raphael from 'raphael'
data() {
return {
paper:'',
zoonArr:0,
selectArr:0,
rawLines : [],
rawLinesData: [],
fittedCurves :[],
fittedCurvesData: [],
error: 50,
showBezierDots: false,
showBezierControlPoints : false,
bezierDots : [],
bezierControlPoints : [],
bezierControlPointLines : [],
colorArr:['red','black','blue','yellow','green','purple']
};
},
methods:{
createSpineDemo() {
this.paper = Raphael('container', 1150, 520);
var container = document.getElementsByTagName('svg').item(0);
var container1 = document.getElementsByTagName('svg').item(1);
container.style.strokeWidth='6px'
// container.style.transform= `scale(${$getCanvasScale()})`;
container.style.transformOrigin='left top'
// container.style.background='#fff'
container.style.border='1px solid #ccc'
container1.style.display='none'
var clearButton = document.getElementById('clear-button');
var retreatButton = document.getElementById('retreat-button');
var isMouseDown = false;
let that = this
container.addEventListener('mousedown', function () {
that.rawLinesData.push([]);
isMouseDown = true;
});
container.addEventListener('mouseup', function () {
isMouseDown = false;
});
container.addEventListener('mousemove', function (event) {
if (isMouseDown) {
var containerArea = container.getBoundingClientRect(),
x = event.clientX - containerArea.left,
y = event.clientY - containerArea.top;
that.rawLinesData[that.rawLinesData.length - 1].push([x, y]);
that.updateLines();
}
});
clearButton.addEventListener('click', function () {
that.rawLinesData = [];
that.rawLines.concat(that.fittedCurves).forEach(function (rawLine) {
rawLine.remove();
});
that.rawLines = [];
that.fittedCurvesData = [];
that.fittedCurves = [];
that.cleanBezierHelpGraphics();
});
retreatButton.addEventListener('click',function(){
that.rawLinesData.splice(that.rawLinesData.length-1,1)
that.rawLines[that.rawLines.length-1].remove()
that.fittedCurvesData[that.fittedCurvesData.length-1].remove()
that.fittedCurves[that.fittedCurves.length-1].remove()
that.rawLines.splice(that.rawLines.length-1,1)
that.fittedCurvesData.splice(that.fittedCurvesData.length-1,1)
that.fittedCurves.splice(that.fittedCurves.length-1,1)
that.updateLines()
})
//
},
lineDataToPathString(lineData) {
var str = "";
lineData.map(function (xy, i) {
if (i == 0) {
str += "M ";
} else {
str += "L ";
}
str += xy[0] + " " + xy[1] + " ";
});
return str;
},
fittedCurveDataToPathString(fittedLineData) {
var str = "";
fittedLineData.map(function (bezier, i) {
if (i == 0) {
str += "M " + bezier[0][0] + " " + bezier[0][1];
}
str += "C " + bezier[1][0] + " " + bezier[1][1] + ", " +
bezier[2][0] + " " + bezier[2][1] + ", " +
bezier[3][0] + " " + bezier[3][1] + " ";
});
return str;
},
cleanBezierHelpGraphics(){
this.bezierDots
.concat(this.bezierControlPoints)
.concat(this.bezierControlPointLines)
.forEach(function(el){
el.remove();
});
this.bezierDots = [];
this.bezierControlPoints = [];
this.bezierControlPointLines = [];
},
updateLines(updateAllCurves) {
// localStorage.setItem('data',JSON.stringify(rawLinesData))
// console.log(this.rawLinesData)
let that=this
this.rawLinesData.forEach(function (lineData, i) {
// console.log(lineData,'lineData')
if (that.rawLines.length <= i) {
var path = that.paper.path('');
path.attr({
stroke: ''
});
that.rawLines.push(path);
console.log(lineData,'lineData')
}
that.rawLines[i].attr("path", that.lineDataToPathString(lineData));
// var isLastItem = i === that.rawLinesData.length - 1;
// if (updateAllCurves ) {
// console.log(that.fittedCurves.length <= i)
if (that.fittedCurves.length <= i) {
path = that.paper.path('');
path.attr({
stroke: that.colorArr[i]
});
that.fittedCurves.push(path);
}
if (lineData.length > 1) {
that.fittedCurvesData[i] = fitCurve(lineData, that.error);
// console.log(that.fittedCurves,'fittedCurves')
// console.log(i)
//console.log(lineData.length, lineData.map(function(arr){return "["+arr.join(",")+"]";}).join(","));
that.fittedCurves[i].attr("path", that.fittedCurveDataToPathString(that.fittedCurvesData[i]));
}
// }
});
that.cleanBezierHelpGraphics();
that.fittedCurvesData.forEach(function (beziers) {
beziers.forEach(function (bezier, i) {
var p1 = bezier[0];
var cp1 = bezier[1];
var cp2 = bezier[2];
var p2 = bezier[3];
var getDotCircle = function (p) {
var circle = that.paper.circle(p[0], p[1], 5);
circle.attr({
fill: 'rgb(200, 50, 0)',
'fill-opacity': 0.5,
stroke: null
});
return circle;
};
var getControlPoint = function (p) {
var circle = that.paper.circle(p[0], p[1], 2);
circle.attr({
fill: 'rgb(100, 200, 0)',
'fill-opacity': 0.5,
stroke: null
});
return circle;
};
var getControlLine = function (p1, p2) {
var pathString = "M " + p1[0] + " " + p1[1] + " ";
pathString += "L " + p2[0] + " " + p2[1];
var line = that.paper.path(pathString);
line.attr({
stroke: 'rgb(100, 200, 0)',
'stroke-opacity': 0.5
});
return line;
};
if (that.showBezierDots) {
if (i == 0) {
that.bezierDots.push(getDotCircle(p1));
}
that.bezierDots.push(getDotCircle(p2));
}
// console.log(bezierDots)
if (that.showBezierControlPoints) {
that.bezierControlPointLines.push(getControlLine(p1, cp1));
that.bezierControlPointLines.push(getControlLine(cp2, p2));
that.bezierControlPoints.push(getControlPoint(cp1));
that.bezierControlPoints.push(getControlPoint(cp2));
}
});
});
},
}
借鉴 添加链接描述
dome 展示
