muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 11:06:40 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

render: poly drawing

Browse source
This commit is contained in:
muerwre 2018-11-28 10:58:44 +07:00
parent 6ed0361acf
commit fb087c67ac
7 changed files with 76 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Fills.jsx
View file

@ -9,7 +9,7 @@ export const Fills = () => (
<stop offset="100%" stopColor="#7137c8" />
</linearGradient>
<linearGradient id="activePathGradient" x1="-20%" x2="50%" y1="0%" y2="140%">
<linearGradient id="activePathGradient" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stopColor="#ff7700" />
<stop offset="100%" stopColor="#ff3344" />
</linearGradient>

51
src/components/renderer/Renderer.jsx
View file

@ -1,5 +1,6 @@
import React from 'react';
import { getTilePlacement } from '$utils/renderer';
import { getPolyPlacement, getTilePlacement } from '$utils/renderer';
import { COLORS, CONFIG } from '$config';
export class Renderer extends React.Component {
componentDidMount() {
@ -9,15 +10,15 @@ export class Renderer extends React.Component {
init() {
const ctx = this.canvas.getContext('2d');
const geometry = getTilePlacement();
const points = getPolyPlacement();
this.fetchImages(ctx, geometry)
.then(images => this.composeImages({ geometry, images, ctx }));
.then(images => this.composeImages({ geometry, images, ctx }))
.then(() => this.composePoly({ geometry, points, ctx }))
}
fetchImages = (ctx, geometry) => {
const {
minX, maxX, minY, maxY, zoom
} = geometry;
const { minX, maxX, minY, maxY, zoom } = geometry;
const images = [];
for (let x = minX; x <= maxX; x += 1) {
@ -43,18 +44,50 @@ export class Renderer extends React.Component {
composeImages = ({ images, geometry, ctx }) => {
const {
minX, minY, maxY, shiftX, shiftY, size
minX, minY, shiftX, shiftY, size
} = geometry;
images.map(({ x, y, image }) => {
const verticalShift = (maxY - minY) * size;
const posX = ((x - minX) * size) + shiftX;
const posY = ((y - minY) * size) - (verticalShift - shiftY);
const posY = ((y - minY) * size) - shiftY;
return ctx.drawImage(image, posX, posY, 256, 256);
});
return images;
};
composePoly = ({ points, geometry, ctx }) => {
let minX = points[0].x;
let maxX = points[0].x;
let minY = points[0].y;
let maxY = points[0].y;
ctx.strokeStyle = 'red';
ctx.strokeLinecap = 'round';
ctx.strokeLinejoin = 'round';
ctx.lineWidth = CONFIG.STROKE_WIDTH;
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i += 1) {
ctx.lineTo(points[i].x, points[i].y);
// gradient bounds
if (points[i].x < minX) minX = points[i].x;
if (points[i].x > maxX) maxX = points[i].x;
if (points[i].y < minY) minY = points[i].y;
if (points[i].y > maxY) maxY = points[i].y;
}
const gradient = ctx.createLinearGradient(minX, minY, minX, maxY);
gradient.addColorStop(0, COLORS.PATH_COLOR[0]);
gradient.addColorStop(1, COLORS.PATH_COLOR[1]);
ctx.strokeStyle = gradient;
ctx.stroke();
ctx.closePath();
};
render() {