问题：
如何在PixiOverlay上绘制svg标记？
冯阳成
我试图在pixioverlay.js（使用pixi.js的绘图覆盖）上绘制svg标记。全新的Pixi我自己，我想我已经把一些东西一起绘制菱形，见第一个代码片段（如果它是不正确的，或需要改进，让我知道）
请问我该怎么做？
在现实生活中，我有很多这样的标记，都是一些几何形状，比如三角形、星形、正方形、圆形等等，总共会有几千个（比如100K甚至更多，这取决于课程的缩放级别。在zoom=0时，可能接近100万个）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src='https://d157l7jdn8e5sf.cloudfront.net/dev/pixi.js'></script>
<!--<script src="https://cdn.rawgit.com/manubb/Leaflet.PixiOverlay/master/docs/js/example.min.js">--></script>
<script id="rendered-js">
var renderer;
renderer = PIXI.autoDetectRenderer();
document.body.appendChild(renderer.view);
var graphics = new PIXI.Graphics();
graphics.lineStyle(5, 0x00FF00, 1);
graphics.moveTo(0, 75);
graphics.lineTo(50, 0);
graphics.lineTo(100, 75);
graphics.lineTo(50, 150);
graphics.lineTo(0, 75);
graphics.cacheAsBitmap = true;
renderer.render(graphics);
</script>
</body>
</html><!DOCTYPE html>
<html style="height: 100%; margin: 0;">
<head>
<title>Leaflet.PixiOverlay example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!--jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!--d3 -->
<script src='https://d3js.org/d3.v4.min.js'></script>
<!-- leaflet v 1.0.3 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>
<!-- I think this Pixi.js and PixiOverlay.js in one file?? -->
<script src="https://cdn.rawgit.com/manubb/Leaflet.PixiOverlay/master/docs/js/example.min.js"></script>
</head>
<body style="height: 100%; margin: 0; overflow: hidden;">
<div id="mymap" style="height: 100%; width: 100%;" >
</div>
<script>
var countries =
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {"name": "UK"},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-4.965, 58.58], [-5.97, 57.58], [-6.459, 56.31], [-5.05, 54.72],[-3.47, 54.36], [-4.08, 53.27],[-5.22, 51.78],[-3.38, 51.37],[-5.58, 50.12], [1.31, 51.09],[0.61, 51.42], [1.66, 52.69],[0.04, 52.88], [0.39, 53.40],[-2.32, 55.97], [-1.80, 57.53],[-3.95, 57.58], [-3.03, 58.60], [-4.96, 58.58],
]
]
}
},
{
"type": "Feature",
"properties": {"name": "France"},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[2.54, 51.09],[-4.65, 48.37],[-1.23, 46.01],[-1.49, 43.61],[3.03, 42.45],[3.64, 43.45],[7.69, 43.77], [5.97, 46.37],[8.04, 48.98],[2.54, 51.09],
]
]
}
}
]
};
function drawPoly(color, alpha, project, container) {
return function (poly) {
var shape = new PIXI.Polygon(poly[0].map(function (point) {
var proj = project([point[1], point[0]]);
return new PIXI.Point(proj.x, proj.y);
}));
container.beginFill(color, alpha);
container.drawShape(shape);
};
}
function renderChart() {
var map = L.map('mymap').setView(new L.LatLng(50, 1.0), 5);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
minZoom: 0,
maxZoom: 9
}).addTo(map);
map.zoomControl.setPosition('bottomright');
var firstDraw = true;
var pixiContainer = new PIXI.Graphics();
var doubleBuffering = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var pixiOverlay = L.pixiOverlay(function (utils) {
var container = utils.getContainer();
var renderer = utils.getRenderer();
var project = utils.latLngToLayerPoint;
var bounds;
if (firstDraw) {
countries.features.forEach(function (feature, index) {
var color = 0xFF0000,
alpha = 0.8;
if (feature.geometry === null) return;
if (feature.geometry.type === 'Polygon') {
bounds = L.bounds(feature.geometry.coordinates[0]);
drawPoly(color, alpha, project, container)(feature.geometry.coordinates);
}
});
}
firstDraw = false;
renderer.render(container);
}, pixiContainer, {
doubleBuffering: doubleBuffering,
destroyInteractionManager: true
});
pixiOverlay.addTo(map);
};
renderChart()
</script>
</body>
</html>共有1个答案
王宏深
就像drawPoly（）为drawMarker（）创建另一个函数一样，将您的标记代码放入其中并传递容器（如您给出的示例中所做的那样）。
我用了你的例子：
<!DOCTYPE html>
<html style="height: 100%; margin: 0;">
<head>
<title>Leaflet.PixiOverlay example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!--jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!--d3 -->
<script src='https://d3js.org/d3.v4.min.js'></script>
<!-- leaflet v 1.0.3 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>
<!-- I think this Pixi.js and PixiOverlay.js in one file?? -->
<script src="https://cdn.rawgit.com/manubb/Leaflet.PixiOverlay/master/docs/js/example.min.js"></script>
</head>
<body style="height: 100%; margin: 0; overflow: hidden;">
<div id="mymap" style="height: 100%; width: 100%;" >
</div>
<script>
var countries =
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {"name": "UK"},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-4.965, 58.58], [-5.97, 57.58], [-6.459, 56.31], [-5.05, 54.72],[-3.47, 54.36], [-4.08, 53.27],[-5.22, 51.78],[-3.38, 51.37],[-5.58, 50.12], [1.31, 51.09],[0.61, 51.42], [1.66, 52.69],[0.04, 52.88], [0.39, 53.40],[-2.32, 55.97], [-1.80, 57.53],[-3.95, 57.58], [-3.03, 58.60], [-4.96, 58.58],
]
]
}
},
{
"type": "Feature",
"properties": {"name": "France"},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[2.54, 51.09],[-4.65, 48.37],[-1.23, 46.01],[-1.49, 43.61],[3.03, 42.45],[3.64, 43.45],[7.69, 43.77], [5.97, 46.37],[8.04, 48.98],[2.54, 51.09],
]
]
}
}
]
};
function drawMarker(container, coords)
{
var graphics = new PIXI.Graphics();
graphics.lineStyle(10, 0xFFF0000, 1);
graphics.moveTo(0, 75);
graphics.lineTo(50, 0);
graphics.lineTo(100, 75);
graphics.lineTo(50, 150);
graphics.lineTo(0, 75);
graphics.cacheAsBitmap = true;
//graphics.width = 1000;
posX = 3000; //just a temp value
posY = 2000; // just a temp value
graphics.x = posX;
graphics.y = posY;
console.log(graphics.y);
container.addChild(graphics);
}
function drawPoly(color, alpha, project, container) {
return function (poly) {
var shape = new PIXI.Polygon(poly[0].map(function (point) {
var proj = project([point[1], point[0]]);
return new PIXI.Point(proj.x, proj.y);
}));
container.beginFill(color, alpha);
container.drawShape(shape);
};
}
function renderChart() {
var map = L.map('mymap').setView(new L.LatLng(50, 1.0), 5);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
minZoom: 0,
maxZoom: 9
}).addTo(map);
map.zoomControl.setPosition('bottomright');
var firstDraw = true;
var pixiContainer = new PIXI.Graphics();
var doubleBuffering = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var pixiOverlay = L.pixiOverlay(function (utils) {
var container = utils.getContainer();
var renderer = utils.getRenderer();
var project = utils.latLngToLayerPoint;
var bounds;
if (firstDraw) {
countries.features.forEach(function (feature, index) {
var color = 0xFF0000,
alpha = 0.8;
if (feature.geometry === null) return;
if (feature.geometry.type === 'Polygon') {
bounds = L.bounds(feature.geometry.coordinates[0]);
// drawPoly(color, alpha, project, container)(feature.geometry.coordinates);
drawMarker(container, feature.geometry.coordinates);
}
});
}
firstDraw = false;
renderer.render(container);
}, pixiContainer, {
doubleBuffering: doubleBuffering,
destroyInteractionManager: true
});
pixiOverlay.addTo(map);
};
renderChart()
</script>
</body>
</html>
类似资料：
-
问题内容： 好吧，我需要一些有关将.svg文件/图像转换为.png文件/图像的帮助… 我的页面上显示了一个.svg图像。它保存在我的服务器上（.png文件）。我需要按需将其转换为.png文件（单击按钮），然后将.png文件保存在服务器上（我将通过.ajax请求执行此操作）。 但是问题是转换。 我阅读了很多有关html5 Canvas的内容，这些内容可能可以帮助我做我现在需要做的事情，但是我找不到解
-
问题内容： 是否有将SVG文件绘制到HTML5画布上的默认方法？GoogleChrome支持将SVG加载为图像（并简单地使用），但是开发者控制台会对此进行警告。 我知道将SVG转换为canvas命令的可能性，但是我希望这不是必需的。我不在乎较旧的浏览器（因此，如果FireFox 4和IE 9支持某些功能，那就足够了）。 问题答案： 编辑2019年12月16日 现在所有主要浏览器都支持Path2D
-
问题内容： 如标题所示，我很难在JApplet中绘制一些矩形（填充的）。确切的目标是拥有一张50x50的表格，并在您 点击目标单元格时将其填充（可以通过绘制一个填充的矩形来完成）。我已经完成了有关起点坐标的数学运算， 但是由于某些原因，我无法在MouseClicked方法中绘制新矩形。有什么建议？ 问题答案： 这是一个相对简单的概念（没有冒犯性）。 首先，请勿将代码与JApplet和混合使用JFr
-
我是WPF的新手。 我想在Canvas上的鼠标移动事件上画一个圆圈。我已经编写了在画布上拖动它的逻辑。但是我想在鼠标点击我的画布时创建一个圆圈，它应该根据鼠标在画布上的移动来调整大小。 我怎样才能做到这一点？ 这是我的代码
-
我一直在研究在谷歌地图上绘制一个静态半径的圆，我遇到的所有答案都描述了绘制标记和与纬度坐标相关的圆。 我需要的是： 这个圆圈和标记漂浮在Google Maps片段上方，即：当您平移和缩放时，它保持静止。这里有一个棘手的部分：我希望能够得到地图中的覆盖区域进行处理（例如：lat、中心标记的长度和圆的半径，取决于地图上的缩放级别）。 我怎样才能做到这一点？提前谢谢。
-
null null 问题是，在ArrayList中有相当多的形状之后，paintComponent（）方法的执行会变慢。 例如，自定义画笔。 在画布上拖动画笔时，我必须向ArrayList添加一个类型为“CustomBrush extends Shape”的新形状 所以只需一次划动，我就可以在ArrayList中得到数百个形状 问题是： 如何将100个形状对象“打包”成一个，使一次笔触成为Arra