import * as d3 from '@/utils/svg/d3.js';
|
|
export const ycslSvgObj = {
|
type: 'svg',
|
svg: null,
|
svgG: null,
|
viewBox: null,
|
pageSvg: null,//svg实例
|
pageG: null, // svg g实例
|
isKQYDYSF: false,//是否开启移动与缩放
|
isKQSF: true,
|
svgZoom: null, // svg 放大缩小zoom限制
|
svgScaleExtent: [0.5, 8], // svg放缩限制
|
width: '1920',
|
height: '1000',
|
beginValue: null,
|
endValue: null,
|
tooltip: null,
|
init: function (config) {//对象初始化
|
var _this = this;
|
|
_this.tooltip = d3.select("body").append("div")
|
.style('position', 'absolute')
|
.style('z-index', '10')
|
.style('color', '#f00')
|
.style('visibility', 'hidden') // 是否可见（一开始设置为隐藏）
|
.style('font-size', '18px')
|
.style('font-weight', 'bold')
|
.text('');
|
|
//检查参数
|
if (config.svg == null) {
|
alert("请求参数格式缺少svg的id值：参数名svg");
|
//alert("请求参数格式存储错误，正确的请求参数为:/n");
|
} else {
|
_this.svg = config.svg;
|
}
|
|
if (config.svgG == null) {
|
alert("请求参数格式缺少svgG的id值：参数名svgG");
|
} else {
|
_this.svgG = config.svgG;
|
}
|
|
if (config.width != null) {
|
_this.width = config.width;
|
}
|
|
if (config.height != null) {
|
_this.height = config.height;
|
}
|
|
if (config.svgScaleExtent != null) {
|
_this.svgScaleExtent = config.svgScaleExtent;
|
}
|
|
if (config.isKQYDYSF != null) {
|
_this.isKQYDYSF = config.isKQYDYSF;
|
}
|
|
_this.pageSvg = d3.select("#" + _this.svg);
|
_this.pageG = d3.select("#" + _this.svgG);
|
// 允许移动放缩
|
if(_this.isKQYDYSF){
|
_this.svgZoom = d3.zoom().scaleExtent(_this.svgScaleExtent).on("zoom", function () {
|
if (_this.isKQSF) {
|
var transforms = d3.event.transform;
|
_this.pageG.attr("transform", transforms);
|
//调整中心位置
|
//_this.pageG.attr("transform", "translate(0,0) scale(0.1)");
|
}
|
});
|
}
|
|
|
d3.selectAll('#' + _this.svg)//d3操作的svg对象和jq对象不一样
|
.attr('width', _this.width)//d3操作的对象px属性都不能带单位
|
.attr('height', _this.height)
|
.attr("display", "inline-block");
|
// 允许移动放缩
|
if(_this.isKQYDYSF){
|
d3.selectAll('#' + _this.svg)
|
.call(_this.svgZoom)
|
.on("wheel", function () {
|
d3.event.preventDefault(); // 放大倍数达到上下限时svg图形不随鼠标滚动上下移动
|
})
|
.on("dblclick.zoom", null);
|
}
|
|
if (_this.viewBox) {
|
d3.selectAll('#' + _this.svg)
|
.attr('viewBox', _this.viewBox);
|
} else {
|
if (_this.width.indexOf("%") != -1) {
|
d3.selectAll('#' + _this.svg)
|
.attr('viewBox', '-' + (_this.width.replace("%", "") / 2) + '% -' + (_this.height.replace("%", "") / 2) + '% ' + _this.width.replace("%", "") + '% ' + _this.height.replace("%", "") + '%');//通过png-svg转换的把实际坐标放大了1倍'
|
} else {
|
d3.selectAll('#' + _this.svg)
|
.attr('viewBox', '-' + (_this.width / 2) + ' -' + (_this.height / 2) + ' ' + _this.width + ' ' + _this.height);//通过png-svg转换的把实际坐标放大了1倍'
|
}
|
}
|
|
//调整中心位置
|
_this.pageG.attr("transform", "translate(0,0) scale(1)");
|
},
|
|
addOrUpdateCameraImg:function(imgUrl,imgWidth,imgHeight){
|
var _this = this;
|
d3.selectAll("#cameraImgSvg").remove();
|
d3.selectAll('#' + _this.svgG)
|
.append("image")
|
.attr("width", imgWidth)
|
.attr("height", imgHeight)
|
.attr("x", 0)
|
.attr("y", 0)
|
.attr("id", "cameraImgSvg")
|
.attr("class", "cameraImgSvg")
|
.attr("cursor", "pointer")
|
.attr("xlink:href", imgUrl)
|
_this.width=imgWidth+"";
|
_this.height=imgHeight+"";
|
d3.selectAll('#' + _this.svg)
|
.attr('width', _this.width)
|
.attr('height', _this.height)
|
_this.pageG.attr("transform", "translate("+(-imgWidth/2)+","+(-imgHeight/2)+") scale(1)");
|
},
|
addOrUpdateCameraRedraw :function (imgTrailLine){
|
var _this = this;
|
d3.selectAll("#cameraImgRedrawSvg").remove();
|
|
if(imgTrailLine.length==0){
|
return
|
}else if(imgTrailLine.length==1){
|
//第一个画圆
|
d3.selectAll('#' + _this.svgG)
|
.append("circle")
|
.attr("id", "cameraImgRedrawSvg")
|
.attr("cx",(imgTrailLine[0].x/3)+"px")
|
.attr("cy",(imgTrailLine[0].y/3)+"px")
|
.attr("r","10px")
|
.attr("fill","yellow");
|
}else{
|
d3.selectAll('#' + _this.svgG)
|
.append('path')//插入路径
|
.attr("id", "cameraImgRedrawSvg")
|
.attr("class", "motionPath")
|
.attr("stroke", "rgba(255, 140, 0)")
|
.attr("fill", "rgba(255, 140, 0,0.2)")
|
.attr("stroke-miterlimit", "0")
|
.attr("stroke-width", 2)
|
.attr("d", _this.getPathD(imgTrailLine));
|
|
if(imgTrailLine.length>2){
|
var newImgTrailLine=[];
|
newImgTrailLine.push(imgTrailLine[0]);
|
newImgTrailLine.push(imgTrailLine[imgTrailLine.length-1]);
|
d3.selectAll('#' + _this.svgG)
|
.append('path')//插入路径
|
.attr("id", "cameraImgRedrawSvg")
|
.attr("class", "motionPath")
|
.attr("stroke", "rgba(255, 0, 0)")
|
.attr("fill", "none")
|
.attr("stroke-miterlimit", "0")
|
.attr("stroke-width", 2)
|
.attr("stroke-dasharray","2 3")
|
.attr("d", _this.getPathD(newImgTrailLine));
|
}
|
}
|
},
|
getPathD: function (imgTrailLine){
|
var pathD="";
|
for (let i = 0; i < imgTrailLine.length; i++) {
|
if(i==0){
|
pathD+="M "+(imgTrailLine[i].x/3)+ " " + (imgTrailLine[i].y/3) + " ";
|
}else{
|
pathD+="L "+(imgTrailLine[i].x/3)+ " " + (imgTrailLine[i].y/3) + " ";
|
}
|
}
|
return pathD;
|
},
|
setIsKQSF: function (isKQSF) {
|
var _this = this;
|
if (isKQSF) {
|
_this.isKQSF = true;
|
} else {
|
_this.isKQSF = false;
|
_this.pageG.attr("transform", "translate(0,0) scale(1)");
|
}
|
},
|
}
|
