问题
2018年12月7日13:48:15
I try input in Console: let a = NOP_VIEWER.getState().
and then: NOP_VIEWER.restoreState(a).
the result is the same, so i think the question maybe on the getState function.
Use 'Autodesk.Viewing.MarkupsCore' extension for 2d draw, read the saved markups data and then draw lost color.I have try more than three draw, but the results were the same. And the draw won't be restored the original shape even exit markup.
function loadMarkup() {
model_viewer.loadExtension('Autodesk.Viewing.MarkupsCore').then((markupsExt) => {
markup = markupsExt
model_viewer.addEventListener(Autodesk.Viewing.Extensions.Markups.Core.EVENT_EDITMODE_CHANGED, function (event) {
console.log(event)
})
markup.enterEditMode()
})
}
function saveMarkup() {
// 将刚刚产生的标注涂丫转换成字串
const markupsPersist = markup.generateData()
// 当前画面的状态 (zoom, direction, sections)
const viewerStatePersist = model_viewer.getState()
markup.leaveEditMode()
markup.hide()
console.log(markupsPersist, viewerStatePersist)
Cookies.set('markupsPersist', markupsPersist)
Cookies.set('viewerStatePersist', viewerStatePersist)
// model_viewer.restoreState(viewerStatePersist)
// setTimeout(() => {
// markup.show()
// markup.loadMarkups(markupsPersist, 'aaa')
// }, 3000)
}
function loadMarkupHistory() {
let svg = Cookies.get('markupsPersist')
let view = Cookies.get('viewerStatePersist')
model_viewer.restoreState(JSON.parse(view))
setTimeout(() => {
model_viewer.loadExtension('Autodesk.Viewing.MarkupsCore').then((markupsExt) => {
markup = markupsExt
markup.enterEditMode()
markup.leaveEditMode()
markup.loadMarkups(svg, 'aaa')
})
}, 500)
}
original draw image: screenshot1
after loadMarkupHistory() image: screenshot2, screenshot3
回答1:
so, using this example website (containing a 2D drawing): https://wallabyway.github.io/offline-pdf-markup/
I create some markup, using the '>' button, and move/zoom the camera to create a new view...
Then in chrome dev console, I type in the following, to capture the view state:
_vsdata = NOP_VIEWER.getState();
and then capture the output _markupdata string into a separate text-editor using:
markup = NOP_VIEWER.getExtension("Autodesk.Viewing.MarkupsCore");
_markupdata = markup.generateData();
I then close the browser, and re-open the sample webpage, and open the dev console again, and type in...
_vsdata = {"seedURN":"pdfs/qcad1.pdf","objectSet":[{"id":[],"isolated":["0"],"allLayers":true,"hidden":[],"idType":"lmv"}],"viewport":{"name":"","eye":[715.1987553432215,1157.394913771758,952.2144059810873],"target":[715.1987553432215,1157.395865986087,0.00007739370581180048],"up":[0,0.9999999999995001,0.0000010000000005565904],"worldUpVector":[0,0,1],"pivotPoint":[2516.6435313443767,530.4773949133468,0],"distanceToOrbit":952.2137790630921,"aspectRatio":1.9121887287024901,"projection":"orthographic","isOrthographic":true,"orthographicHeight":952.2143285878576},"renderOptions":{"environment":"Simple Grey","ambientOcclusion":{"enabled":false,"radius":12,"intensity":1},"toneMap":{"method":0,"exposure":0,"lightMultiplier":0},"appearance":{"ghostHidden":true,"ambientShadow":true,"antiAliasing":false,"progressiveDisplay":true,"swapBlackAndWhite":false,"displayLines":true,"displayPoints":false}}}
_markupdata = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" layer-order-id="markups-svg" style="position:absolute; left:0; top:0; transform:scale(1,-1); -ms-transform:scale(1,-1); -webkit-transform:scale(1,-1); -moz-transform:scale(1,-1); -o-transform:scale(1,-1); transformOrigin:0, 0; -ms-transformOrigin:0, 0; -webkit-transformOrigin:0, 0; -moz-transformOrigin:0, 0; -o-transformOrigin:0, 0; " width="1459" height="763" viewBox="93.25242169278158 715.903268001178 735.2677612304688 384.51632690468136" pointer-events="painted" cursor="crosshair"><metadata><markup_document xmlns="http://www.w3.org/1999/xhtml" data-model-version="4"></markup_document></metadata><g cursor="inherit" pointer-events="stroke"><metadata><markup_element xmlns="http://www.w3.org/1999/xhtml" stroke-width="2.621231979030199" stroke-color="#ff0000" stroke-opacity="1" fill-color="#ff0000" fill-opacity="0" type="rectangle" position="710.4914295972688 1042.3945255173116" size="277.6138818125107 167.36150603104852" rotation="0"></markup_element></metadata><path id="markup" d="M -137.49632491674026 -82.37013702600916 l 274.9926498334805 0 l 0 164.74027405201832 l -274.9926498334805 0 z" stroke-width="2.621231979030199" stroke="rgba(255,0,0,1)" fill="none" transform="translate( 710.4914295972688 , 1042.3945255173116 ) rotate( 0 )"/></g><g cursor="inherit" pointer-events="stroke"><metadata><markup_element xmlns="http://www.w3.org/1999/xhtml" stroke-width="2.621231979030199" stroke-color="#00ff00" stroke-opacity="1" fill-color="#ff0000" fill-opacity="0" type="rectangle" position="605.2689024399756 809.3865951844264" size="223.75523371235658 167.81643100820293" rotation="0"></markup_element></metadata><path id="markup" d="M -110.5670008666632 -82.59759951458636 l 221.1340017333264 0 l 0 165.19519902917273 l -221.1340017333264 0 z" stroke-width="2.621231979030199" stroke="rgba(0,255,0,1)" fill="none" transform="translate( 605.2689024399756 , 809.3865951844264 ) rotate( 0 )"/></g></svg>`
Now I restore my view-state:
NOP_VIEWER.restoreState(_vsdata);
Now I restore my markup:
markup = NOP_VIEWER.getExtension("Autodesk.Viewing.MarkupsCore");
markup.enterEditMode(); markup.leaveEditMode();
markup.loadMarkups(_markupdata, 'aaa')
At the end, you should end up with the same camera view position and the same markup (with markup colors) as what was initially created, like in this screenshot.
Note: Two red and green markup colors, and a zoomed/moved camera position.
Does this work for you?
回答2:
Unfortunately I was unable to replicate the issue. I was able to save and load markups using your f2d with steps below:
- Draw the markups:
- Save and refresh:
- Reload and all is well:
Be sure to use the latest version of Viewer (v6+) and try again:
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v6.0" type="text/css">
<script language="JavaScript" src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.0"></script>
回答3:
the color was hide because of the viewerState object has a property: isolated. set the isolated to an empty array will resolve the problem
来源：https://stackoverflow.com/questions/53662806/when-the-2d-draw-read-the-saved-markup2d-the-draw-lost-color