Commit 5b31db1d authored by wind.wang's avatar wind.wang

remove dep webview

parent 16938022
{ {
"name": "@hisense/react-native-canvas", "name": "@hisense/react-native-canvas",
"license": "MIT", "license": "MIT",
"version": "0.1.32", "version": "0.1.35",
"main": "dist/Canvas.js", "main": "dist/Canvas.js",
"scripts": { "scripts": {
"build": "babel src --out-dir dist --copy-files --compact false && node bundle-html.js ./dist/index.html", "build": "babel src --out-dir dist --copy-files --compact false && node bundle-html.js ./dist/index.html",
...@@ -21,8 +21,7 @@ ...@@ -21,8 +21,7 @@
"prettier": "^1.14.2" "prettier": "^1.14.2"
}, },
"dependencies": { "dependencies": {
"ctx-polyfill": "^1.1.4", "ctx-polyfill": "^1.1.4"
"react-native-webview": "^5.2.0"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
......
...@@ -13,7 +13,7 @@ import './CanvasGradient'; ...@@ -13,7 +13,7 @@ import './CanvasGradient';
@webviewTarget('canvas') @webviewTarget('canvas')
@webviewProperties({width: 300, height: 150}) @webviewProperties({width: 300, height: 150})
@webviewMethods(['toDataURL', 'drawMultiText']) @webviewMethods(['toDataURL', 'drawMultiText', 'radiusCanvas'])
export default class Canvas extends Component { export default class Canvas extends Component {
static propTypes = { static propTypes = {
style: PropTypes.shape(ViewStylePropTypes), style: PropTypes.shape(ViewStylePropTypes),
......
...@@ -50,6 +50,23 @@ class AutoScaledCanvas { ...@@ -50,6 +50,23 @@ class AutoScaledCanvas {
ctx.fillText(row[b], x, y + ((b + 1) * lineHeight)) ctx.fillText(row[b], x, y + ((b + 1) * lineHeight))
} }
} }
radiusCanvas = (radius, width, height) => {
const ctx = this.element.getContext('2d');
const x = 0
const y = 0
ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2)
ctx.lineTo((width - radius) + x, y)
ctx.arc((width - radius) + x, radius + y, radius, (Math.PI * 3) / 2, Math.PI * 2)
ctx.lineTo(width + x, (height + y) - radius)
ctx.arc((width - radius) + x, (height - radius) + y, radius, 0, Math.PI / 2)
ctx.lineTo(radius + x, height + y)
ctx.arc(radius + x, (height - radius) + y, radius, Math.PI / 2, Math.PI)
ctx.fillStyle = 'transparent'
ctx.strokeStyle = 'transparent'
ctx.fill()
ctx.stroke()
ctx.clip()
}
toDataURL(...args) { toDataURL(...args) {
return this.element.toDataURL(...args); return this.element.toDataURL(...args);
} }
...@@ -159,7 +176,7 @@ const createObjectsFromArgs = args => { ...@@ -159,7 +176,7 @@ const createObjectsFromArgs = args => {
for (let index = 0; index < args.length; index += 1) { for (let index = 0; index < args.length; index += 1) {
const currentArg = args[index]; const currentArg = args[index];
if (currentArg.className !== undefined) { if (currentArg.className !== undefined) {
const {className, classArgs} = currentArg; const { className, classArgs } = currentArg;
const constructor = new constructors[className](...classArgs); const constructor = new constructors[className](...classArgs);
args[index] = constructor; args[index] = constructor;
} }
...@@ -201,25 +218,25 @@ const typedArrays = { ...@@ -201,25 +218,25 @@ const typedArrays = {
*/ */
Image.bind = Image.bind =
Image.bind || Image.bind ||
function() { function () {
return Image; return Image;
}; };
Path2D.bind = Path2D.bind =
Path2D.bind || Path2D.bind ||
function() { function () {
return Path2D; return Path2D;
}; };
ImageData.bind = ImageData.bind =
ImageData.bind || ImageData.bind ||
function() { function () {
return ImageData; return ImageData;
}; };
Uint8ClampedArray.bind = Uint8ClampedArray.bind =
Uint8ClampedArray.bind || Uint8ClampedArray.bind ||
function() { function () {
return Uint8ClampedArray; return Uint8ClampedArray;
}; };
...@@ -232,10 +249,10 @@ const populateRefs = arg => { ...@@ -232,10 +249,10 @@ const populateRefs = arg => {
document.body.appendChild(canvas); document.body.appendChild(canvas);
function handleMessage({id, type, payload}) { function handleMessage({ id, type, payload }) {
switch (type) { switch (type) {
case 'exec': { case 'exec': {
const {target, method, args} = payload; const { target, method, args } = payload;
const result = targets[target][method](...args.map(populateRefs)); const result = targets[target][method](...args.map(populateRefs));
const message = toMessage(result); const message = toMessage(result);
...@@ -250,36 +267,36 @@ function handleMessage({id, type, payload}) { ...@@ -250,36 +267,36 @@ function handleMessage({id, type, payload}) {
} }
} }
} }
window.ReactNativeWebView.postMessage(JSON.stringify({id, ...message})); window.ReactNativeWebView.postMessage(JSON.stringify({ id, ...message }));
break; break;
} }
case 'set': { case 'set': {
const {target, key, value} = payload; const { target, key, value } = payload;
targets[target][key] = populateRefs(value); targets[target][key] = populateRefs(value);
break; break;
} }
case 'construct': { case 'construct': {
const {constructor, id: target, args = []} = payload; const { constructor, id: target, args = [] } = payload;
const newArgs = createObjectsFromArgs(args); const newArgs = createObjectsFromArgs(args);
const object = new constructors[constructor](...newArgs); const object = new constructors[constructor](...newArgs);
object.__constructorName__ = constructor; object.__constructorName__ = constructor;
const message = toMessage({}); const message = toMessage({});
targets[target] = object; targets[target] = object;
window.ReactNativeWebView.postMessage(JSON.stringify({id, ...message})); window.ReactNativeWebView.postMessage(JSON.stringify({ id, ...message }));
break; break;
} }
case 'listen': { case 'listen': {
const {types, target} = payload; const { types, target } = payload;
for (const eventType of types) { for (const eventType of types) {
targets[target].addEventListener(eventType, e => { targets[target].addEventListener(eventType, e => {
const message = toMessage({ const message = toMessage({
type: 'event', type: 'event',
payload: { payload: {
type: e.type, type: e.type,
target: {...flattenObject(targets[target]), [WEBVIEW_TARGET]: target}, target: { ...flattenObject(targets[target]), [WEBVIEW_TARGET]: target },
}, },
}); });
window.ReactNativeWebView.postMessage(JSON.stringify({id, ...message})); window.ReactNativeWebView.postMessage(JSON.stringify({ id, ...message }));
}); });
} }
break; break;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment