info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-01 06:20:52 +02:00
Code Issues Releases Wiki Activity

Make bezier canvases HiDPI-aware. (#47)

Browse Source 
* Make bezier canvases HiDPI-aware.

* Fix HiDPI bugs and linting issues.

* Address review comments.
This commit is contained in:
Markus Stange
2017-02-11 18:36:12 -05:00
committed by Mike Kamermans
parent 3f2b2cc80a
commit 8e8d09e825
1 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/Graphic.jsx
View File

@@ -16,6 +16,7 @@ var Graphic = React.createClass({
defaultWidth: 275,
defaultHeight: 275,
panelCount: 1,
Bezier: Bezier,
utils: Bezier.getUtils(),
@@ -53,6 +54,10 @@ var Graphic = React.createClass({
<figure className={this.props.inline ? "inline": false}>
<canvas ref="canvas"
tabIndex="0"
style={{
width: this.panelCount * this.defaultWidth + "px",
height: this.defaultHeight + "px"
}}
onMouseDown={this.mouseDown}
onMouseMove={this.mouseMove}
onMouseUp={this.mouseUp}
@@ -68,11 +73,13 @@ var Graphic = React.createClass({
componentDidMount: function() {
var cvs = this.refs.canvas;
cvs.width = this.defaultWidth;
cvs.height = this.defaultHeight;
var dpr = this.getPixelRatio();
cvs.width = this.defaultWidth * dpr;
cvs.height = this.defaultHeight * dpr;
this.cvs = cvs;
var ctx = cvs.getContext("2d");
this.ctx = ctx;
this.ctx.scale(dpr, dpr);
if (this.props.paperjs) {
var Paper = this.Paper = require("../lib/vendor/paperjs/paper-core");
@@ -238,6 +245,8 @@ var Graphic = React.createClass({
this.ctx.strokeStyle = "black";
this.ctx.lineWidth = 1;
this.ctx.fillStyle = "none";
var dpr = this.getPixelRatio();
this.ctx.scale(dpr, dpr);
this.offset = {x:0, y:0};
this.colorSeed = 0;
},
@@ -245,8 +254,15 @@ var Graphic = React.createClass({
setSize: function(w,h) {
this.defaultWidth = w;
this.defaultHeight = h;
this.refs.canvas.width = w;
this.refs.canvas.height = h;
var cvs = this.refs.canvas;
cvs.style.width = this.panelCount * w + "px";
cvs.style.height = h + "px";
var dpr = this.getPixelRatio();
cvs.width = this.panelCount * w * dpr;
cvs.height = h * dpr;
this.ctx.scale(dpr, dpr);
},
setCurves: function(c) {
@@ -279,16 +295,23 @@ var Graphic = React.createClass({
return new this.Bezier(120,160,35,200,220,260,220,40);
},
getPixelRatio: function () {
return window.devicePixelRatio || 1;
},
toImage: function() {
var dataURL = this.refs.canvas.toDataURL();
var img = new Image();
img.src = dataURL;
img.devicePixelRatio = this.getPixelRatio();
return img;
},
setPanelCount: function(c) {
this.panelCount = c;
var cvs = this.refs.canvas;
cvs.width = c * this.defaultWidth;
cvs.width = c * this.defaultWidth * this.getPixelRatio();
cvs.style.width = c * this.defaultWidth + "px";
},
setOffset: function(f) {
@@ -602,12 +625,13 @@ var Graphic = React.createClass({
offset.x += this.offset.x;
offset.y += this.offset.y;
}
var dpr = image.devicePixelRatio || 1;
if (image.loaded) {
this.ctx.drawImage(image,offset.x,offset.y);
this.ctx.drawImage(image,offset.x,offset.y, image.width/dpr, image.height/dpr);
} else {
image.onload = () => {
image.loaded = true;
this.ctx.drawImage(image,offset.x,offset.y);
this.ctx.drawImage(image,offset.x,offset.y, image.width/dpr, image.height/dpr);
};
}
},